html - 使用 CSS 和单个列表的简单 2 列导航？

Question

我希望通过使用单个 <ul> 制作一个两栏导航栏六个<li>元素:

<nav>
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Team</li>    
    <li>Store</li>
    <li>Blog</li>
    <li>Contact</li>
    </ul>
</nav>​

一侧三个元素，另一侧三个；垂直排列。

现在，制作两个独立的 <ul> 很容易做到元素并在它们之间放置填充/边距:http://jsfiddle.net/Baumr/SJcjN/ — 但这不是一个很好的解决方案。

也可以包裹<span>每组三个标签周围的标签 <li>的——但这是唯一的 CSS 解决方案吗？

寻找一些优雅的想法。谢谢!

Answer 1

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Team</li>    
  <li>Store</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

CSS:

li {
  width: 50%;
  float: left;
  padding: 5px 0; 
}

他们会这样订购:

Home About
Team Store
Blog Contact

如果这不是问题，那么您有一个非常简单的解决方案。

编辑:

li:nth-child(even) {
  width: 50%;
  float: right; 
}
li:nth-child(odd) {
  width: 50%;
  float: left;
}

这将以正确的方式对它们进行排序。不确定 IE 将如何运行，但可以在所有其他浏览器中运行。

或者您可以严格遵循 UL-LI 概念，因此您的 html 将如下所示，您可以根据需要拥有任意多的列:

<nav>
    <ul class="menuitem">
       <li class="column">
          <ul>               
            <li>Home</li>
            <li>About</li>
            <li>Team</li>
          </ul>
        </li>
        <li class="column">
          <ul>               
             <li>Store</li>
             <li>Blog</li>
             <li>Contact</li>
          </ul>
        </li>               
    </ul>

    <ul class="menuitem">
        <li class="column">
          .....
        </li>
    </ul>      

</nav>

制作正确且格式良好的 html 可以让您的生活更轻松。