liにスタイルシートが上手くいかない

質問

こんにちは。
次のコードが上手く表示されず困っています。

<ul>
<li style="border:1px solid red">aaa</li>
<ul>
<li>bbb</li>
</ul>
</ul>

この場合aaaにのみ赤い罫線がひかれると思うのですが、bbbまでくくった形で罫線がひかれます。

liはhtmlで省略可能なためこのようになるのでしょうか。それとも書き方を間違っているのでしょうか。

回答No.4

LLLuna · ベストアンサー

書き方が間違っていると思います。
ul要素に直接配置できるのはli要素のみです。
この書き方では、ul要素に直接ul要素が書かれています。
そのため、IEの場合は恐らく、aaaの直後にある</li>をゴミとして無視してしまっているものと思われます。
<ul>
<li style="border:1px solid red">aaa</li>
<li>
<ul>
<li>bbb</li>
</ul>
</li>
</ul>
或いは、
<ul>
<li><div style="border:1px solid red">aaa</div>
<ul>
<li>bbb</li>
</ul>
</li>
</ul>
と書けば（divは任意の要素に置き換え可）、解決すると思います。

お礼

<ul>の下には<ul>を入れれるものと勘違いしていたようです。ありがとうございました。

回答No.7

LLLuna

6氏の案は、文法的にアウトです。
dt要素に配置できるのはインライン要素に限られるからです。これを行うと、ブラウザによっては不可解なレンダリングがされます。（経験済み）

あと、HTMLは文書に意味づけを行うものですから、見かけだけで組み合わせてはいけません。（必ずしも同じ見かけになるとは限りません）

回答No.6

yambejp

<dl>
<dt><ul><li style="border:1px solid red">aaa</ul>
<dd><ul><li>bbb</ul>
</dl>

でいいんじゃないですか？

回答No.5

pi8027

ul要素の直下にはli要素しか書けません。リストを入れ子にしたい人は度々ul要素の直下にul/ol要素を記述しますが、それは「不可」です。入れ子にしたい場合は、li要素の直下に書く必要があります。

参考URL：

http://web.xii.jp/iec/html/reference/ul

回答No.3

noname#17189

IEのせいみたい。
オペラとファイアフォックスとネスケだったら質問者さんの意図するみたいに表示されました。

でもIEでも、
<ul>
<li style="border:1px solid red">aaa</li>
<li>bbb</li>
<li>ccc</li>
<ul>
<li>ddd</li>
<li>eee</li>
</ul>
</ul>
みたいにしてあったら一番最初のaaaのみが囲われてくれるみたいですよ。

質問文みたいにaaaとbbbが一個ずつしかないんだったらdivタグとかでmargin指定にしてしまったほうが手っ取り早い気もしますけど。

回答No.2

rusya

<dl>
<dt style="border:1px solid red">aaa
<dd>
<ul>
<li type="circle">bbb
</ul>
</dl>

　↑こんな感じでしょうか。文章のインデントを下げるだけなら、その段落に
style="margin-left:○px"
と指定する方法もありますが。

回答No.1

noname#17189

<ul>
<li style="border:1px solid red">aaa</li>

<li>bbb</li>

</ul>

これだけじゃだめなの？

補足

bbbは階層を下げたいので、<ul>でくくりたいと思っています。