使用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可以让您的生活更轻松.