css 横並びのナビゲーションバーを二段にする場合

質問

CSSでデザインしてるのですが・・・。
ナビゲーションバーで横並びに４項目。
ここまでは出来るのですが、この４項目を
２段にして、８項目にするには、どのように書くのがスマートでしょうか。
テーブルにしたほうが早そうな気もしますが、
表かといいうと、違う気もします。

ulでリスト表示の途中で改行させる方法があるのか、
マークアップが適切とはいえないけれど、
リストが二つあることにして、ulを二つにするか、
などと考えています。

初心者でよくわかっていないのですが、
皆様はどのようにしたら良いと思われますか？

よろしくお願いします。

回答No.1

tsucu · ベストアンサー

たとえば、外枠のブロックで横幅を決めちゃって、その中で float: left; じゃだめ？非常に単純にCSSとHTMLを書くとこんな感じ。

■CSS部

*{
margin:0;
padding:0;
}

ul {width: 600px;}

li {
height: 50px;
width: 150px;
list-style-type: none;
float: left;
display: block;
}

■HTML部
<ul>
<li>めにゅー1</li>
<li>めにゅー2</li>
<li>めにゅー3</li>
<li>めにゅー4</li>
<li>めにゅー5</li>
<li>めにゅー6</li>
<li>めにゅー7</li>
<li>めにゅー8</li>
</ul>

お礼

シンプルで理にかなってますね。とても助かりました！

回答No.2

15mm

<ul>を二つ作ってそれを２段にするとどうでしょう。
文字数がばらばらでも確実に４つずつ詰め込めますし、
一段に入れる量も簡単に変えられるでしょう。
幅の設定はなくてもいいはずです。

マージンの設定は適当に変えてください

ul{margin:0px;}
li{display:inline;margin:0px 3px;}

<ul><li>１段目１つ目</li><li>１段目２つ目</li>・・・</ul>
<ul><li>２段目１つ目</li><li>２段目２つ目</li>・・・</ul>

お礼

ありがとうございます！
この方法でとりあえず目標達成できました。