ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4021347 リストが途中で切れていても背景色は表示されるようにしたい
質問者：Sora_hazuki どうしても分らないので、教えてください。
リスト<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> のような空タグを入れておくのもできません。

どなたか、良い方法がありましたら、教えていただけませんでしょうか？
よろしくお願いいたします。
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/14 12:12
最新から表示｜回答順に表示

回答
ANo.3 ２さんも言われていますが、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>
回答者：metametamu
種類：回答
どんな人：一般人
自信：自信あり
回答日時：
08/05/14 22:00
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼回答ありがとうございます。
試してみたところ、IE７では確認することができました。

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

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

回答
ANo.2 liでなく、ulに背景ではどうでしょうか？
回答者：ICHI-yan
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/14 16:42
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)

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

---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>
回答者：64bit
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/14 12:50
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼回答いただき、ありがとうございます。

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

双方で同じように表示することは難しいのでしょうか？
最新から表示｜回答順に表示
スポンサーサイト（詳細）
このページのトップへ