リストが途中で切れていても背景色は表示されるようにしたい

質問

どうしても分らないので、教えてください。
リスト<li>を横並びにして、項目リンクを作成しているのですが、後々増えることを想定しています。

<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>

<li>Menu4</li>
<li>Menu5</li>

という状態で、Menu3部分で改行されたようにすると、背景色がMenu5のところで途切れてしまいます。
（※ベースのwidthを300px、liのwidthを100px、といった感じで改行させたように見せています）

<li>Menu6</li>を記述しなくても、背景色が表示されるようにしたいのですが、

<div>
<ul>
<li></li> ...
</ul>
</div>

上記のように<div>で括り、背景色を指定しても、うまくできません。
括った<div>にheigthをピクセル指定すれば表示されますが、それだと、項目が増えるたびに変更しなければなりません。

また、<li>タグにはlist-style-imageも指定しているので、
<li></li> のような空タグを入れておくのもできません。

どなたか、良い方法がありましたら、教えていただけませんでしょうか？
よろしくお願いいたします。

回答No.3

noname#66720

２さんも言われていますが、ulに背景色で解決できると思います。
ただ、liにfloatを使っている場合↓のように、ulの次にくる要素にclearを指定しないと、ulが伸びずに色が出ません。

<style type="text/css">
#NAV {
width:300px;
background:#f00; /* ここで背景色を指定 */
}
#NAV li {
float:left;
widht:100px;
}
#CONTENT {
clear:both; /* ここでliのfloatをclear */
}
</style>

<ul id="NAV">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
<div id="CONTENT">ulの次の要素</div>

お礼

回答ありがとうございます。
試してみたところ、IE７では確認することができました。

しかし、Firefoxでは背景色すら表示されませんでした…。
ulとliに背景色を指定してみたところ表示されましたが、やはりMenu5部分で切れてしまいます。

IEとFirefox双方で表示可能にすることはできないのでしょうか…。

回答No.2

ICHI-yan

liでなく、ulに背景ではどうでしょうか？

回答No.1

64bit

あまり格好良くないですけど、こんな感じでどうでしょうか？

---CSS---
li { display:block; float:left; width:100px; background:#ff0000; }

---HTML---
<div style="width:300px">
<ul style="display:inline">
　　<li>Menu1</li>
　　<li>Menu2</li>
　　<li>Menu3</li>
　　<li>Menu4</li>
　　<li>Menu5</li>
</ul>
<div style="width:100px; background:#ff0000"></div>
</div>

お礼

回答いただき、ありがとうございます。

早速試してみたところ、IE７では確認ができました。
しかし、FirefoxではMenu5で切れてしまいます…。

双方で同じように表示することは難しいのでしょうか？