ulやolのリストを横並びに表示したい

初心者です。
題名の通りなのですが、普通にリスト表示すると、縦並びになってしまいますが、
これを横並びにする方法を教えていただけないでしょうか。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/12/28 11:44

その部分のHTMLと想定される表現によって色々な方法があります。

　大きく分けて、<li>というリストアイテムをブロックにしてfloatを使って並べるか、インライン要素にするかです。ブロックだとウィンドウ巾が小さいとき、<li></li>全体が回り込みますが、inlineだと途中で改行します。

[例]ナビゲーションセクションにあるリスト(ナビゲーションリスト)の場合
<div class="nav">
<ol>
<li><a href="">ABC</a></li>
<li><a href="">EFG</a></li>
<li><a href="">ABC</a></li>
<li><a href="">EFG</a></li>
</ol>
の場合に
ブロックで横並び
div.nav ol li,div.nav ol li{
display:block;
}
div.nav ol li{
list-style:none;
float:left;
}

インライン要素にする場合
div.nav ol li{
display:inline;
list-style:none;
}

　リンクリストの場合、一般的にはブロックにするほうが、ボタン風にしたり、プルダウンにしたりとデザインの自由度が高いので多く使われているようです。
　単純にセクションごとの遷移リストの場合は、inlineのほうが良い場合もあります。

この回答への補足

早速のご連絡、ありがとうございます。
頂いたブロック要素で、リストは横一列になったのですが、
そのあとの要素がリストの右側に回り込んでしまいます。
リスト表示の後は、通常の配置に戻したいのですが、
これはどうすればよいでしょうす。

お願いいたします。

補足日時：2011/12/28 13:08

No.5 回答者： noname#158634 回答日時： 2011/12/28 19:07

一般的には、<li>にfloat:leftを設定。

しかしこうすると、floatの副作用で</ul>から下のレイアウトが変化するので、<ul></ul>の次の要素にclear:bothを指定。bothはleftでも当然いいのですが、念のためboth(左右両方)を指定する場合が多い。
ちなみに、「<ul></ul>の次の要素」にわざわざfloat解除用の指定をするのが美しくないという考え方もあり(ちなみに私もです)、「clearfix」という手法がとられることもよくあります。
https://www.google.com/search?q=css+clearfix
ただし、これは疑似要素を使うため初心者には若干ハードルが高い。CSSに慣れるまではおとなしく「次の要素にclear:both」をしておくのがいいでしょう。

No.4 回答者： ORUKA1951 回答日時： 2011/12/28 16:05

＞そのあとの要素がリストの右側に回り込んでしまいます。

失礼しました。ちょっとしたミスを
div.nav ol,div.nav ol li{/* 訂正 */
display:block;
list-style:none;
margin:0;padding:0;
}
div.nav ol{
width:100%;height:26px;/* line-height + (border-width)*2 */
line-height:20px;
}
div.nav ol li{
width:20%;/* 例です */
}
div.nav ol li+li{
margin-left:10px;
}
div.nav ol li a{
display:block;/* インライン要素をブロックに */
width:100%;
height:100%;
text-decoration:none;/* アンダーラインを消す */
border:red 3px ridge;/* 盛り上がった赤い枠 */
}
div.nav ol li a:visited{
border-color:maroon;
}
div.nav ol li a:hover{
color:red;
border-color:yellow;
}
div.nav ol li a:active{
border-style:inset;
background-color:blue;
}

No.3 回答者： noname#147388 回答日時： 2011/12/28 14:37

http://www.tagindex.com/stylesheet/list/float.html だそ

No.1 回答者： askaaska 回答日時： 2011/12/28 10:08

スタイルシートで

<li>にたいし
display:inline
を指定すればOK