マルチローチCSS NAV

Question

2列に6つのNAVアイテムがあるコンテンツパネルスイッチャーを作成しています。したがって、各行に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}, それ以外の場合は、最良の結果を得るためのLISではなく、リスト内のAタグのみをスタイルします。

簡単なメニュー：

<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/