html - 複数行のCSSナビゲーション

Question

2列に6つのナビゲーションアイテムがあるコンテンツパネルスイッチャーを作成しています。したがって、各行に3つのアイテムがあります。全部で6項目、2行、3列で、各列は左に均等に配置されています。最小限のHTMLでこれを作成するにはどうすればよいですか。私はそれができると確信していますが、たくさんのdivとジャンクを追加したくありません。ヘルプ？:)

Answer 1

HTMLコードはこれに似ています

  <div id="nav"> 
    <ul> 
        <li>data</li> 
        <li>data</li> 
    </ul> 
    <ul> 
        <li>more data<li> 
        <li>more data</li> 
    </ul> 
    <ul>
        <li>even more data<li> 
        <li>even more data</li> 
    </ul>

</div> 

そしてCSSは

ul { 
    float: left; 
    list-style: none;
} 

私の答えは、2行で3つのアイテムを要求したことを除いて、ggregoireに似ています。コメントを投稿できないので、新しい回答を書く必要がありました。

Answer 2

HTML：

<div id="navtabs">
    <ul>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
    <ul id="right">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
</div>

CSS：

ul {
    float: left;
}

#right {
    margin-left: 10px;
}

例： http： //jsfiddle.net/ddYsk/

Answer 3

スタイル付きの順序付けされていないリストを使用するのが最良の選択です。それらは本質的にセマンティックであるため、SEOとスクリーンリーダーに適しています。

水平メニューの場合はliを使用し{float:left}、そうでない場合はリスト内のAタグのみをスタイル設定し、最良の結果を得るにはLIをスタイル設定しません。

シンプルなメニュー：

<ul>
   <li><a href="">item A</a></li>
   <li><a href="">item B</a></li>
</ul>

マルチレベルメニュー。

.menu {
  ul li { position:relative; float:left }
  ul li a { display:block; ... your styles ...}
  ul li ul {position:absolute ..position as needed ...}
  ul li ul li {float:none}
}

<div class='menu'>
<ul>
   <li><a href="">item A</a>
      <ul>
        <li><a href="">item A-1</a></li>
        <li><a href="">item A-2</a></li>
     </ul>     
   </li>
   <li><a href="">item B</a></li>
</ul>
</div>

これはCSSリセットで使用するのが最善です：http：//developer.yahoo.com/yui/reset/