olタグ・liタグで一部のリストを横並びにした

質問

olタグ・liタグで一部のリストを横並びにしたい場合
olタグに
display: inline;
list-style-type: none;
としても意味がないのでしょうか?

<style type="text/css">
ol.test1{
display: inline;
list-style-type: none;
}</style>

<ol class="test1">
<li><a href="#">階層1</a></li>
<li><a href="#">階層2</a></li>
<li><a href="#">階層3</a></li>
</ol>
としても横にはならずに番号が消えました。

なので
li.test2{
display: inline;
list-style-type: none;
}
として
<ol>
<li class="test2"><a href="#">階層1</a></li>
<li class="test2"><a href="#">階層2</a></li>
<li class="test2"><a href="#">階層3</a></li>
</ol>
としたのですが
liの数だけスタイルシートを指定しないとダメなのでしょうか?

<ol>
<li class="test2"><a href="#">階層1</a></li>
<li><a href="#">階層2</a></li>
<li><a href="#">階層3</a></li>
</ol>
のように一つだけクラスに入れたら
そこだけ番号が消えた上
横並びにはなりませんでした。

回答No.2

4017B · ベストアンサー

とりあえず…

<style>
.test li
{
float: left;
margin-left: 2.0em;
}
.test:after
{
content: '';
display: table;
clear: both;
}
</style>

<ol class="test">
<li>階層1</li>
<li>階層2</li>
<li>階層3</li>
</ol>

<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>

～こんな感じやってください。

※注意！
必ず .test:after {～} の記述とセットで使う事。そうしないと、それ以降の<li>要素が全て横並びになってしまいます。それをリセットする記述です。

お礼

回答ありがとうございました。

回答No.1

Katsu_Kaiz

よく考えてみるとわかるのですが、横並びにするのは<ol>ではなくて<li>ですよね。<li>を横並びにするから<li>が横に並ぶのであって、<ol>を横並びにしても何も起こりません。よくわからない場合は、紙に書いて考えてみるとわかりやすいです。

したがって、とりあえずは

<style type="text/css">
li.test2{
display: inline;
list-style-type: none;
}
</style>

<ol>
<li class="test2"><a href="#">階層1</a></li>
<li class="test2"><a href="#">階層2</a></li>
<li class="test2"><a href="#">階層3</a></li>
</ol>

が正しい書き方です。けれども、おっしゃるとおり《class="test2"》が増えすぎて大変ですね。

こういうときは、つぎのように書くといいです。
<style type="text/css">
ol.test3 li {
display: inline-block;
list-style-type: none;
}
</style>

<ol class="test3">
<li><a href="#">階層1</a></li>
<li><a href="#">階層2</a></li>
<li><a href="#">階層3</a></li>
</ol>

《ol.test3 li》という書き方がコツです。これは、<ol class="test3">のなかにある<li>という意味です。こうすれば《class="test3"》を一回書くだけで済みますし、そのなかにある<li>がすべて横並びになります。なお、《display: inline;》でも構いませんが、どちらかといえば《display: inline-block;》のほうが使いやすいのではないかと思います。

こういう書き方を《子孫セレクタ》といって、この場合は親が<ol class="test3">になります。そして、<ol>のなかにある<li>が子となって、この<li>が《display: inline-block;》になるわけです。これで<li>が横並びになります。

理解するまでは私も大変でしたが、使いこなせるようになると便利です。ほかにもいろいろなセレクタがありますので、下記のサイトを参考にしながら、いろいろと試してみてください。

参考URL：

http://htmq.com/csskihon/005.shtml

お礼

回答ありがとうございました。