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;
} 

我的回答与 ggregoire 类似，只是您要求 2 行中的 3 个项目。我无法发表评论，所以我不得不写一个新的答案。

Answer 2

使用样式化的无序列表是最好的选择。它们本质上是语义化的，因此它们对 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/

Answer 3

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/