使用 CSS 和单个列表的简单 2 列导航？答案

【问题标题】：Simple 2-column navigation with CSS and a single list?使用 CSS 和单个列表的简单 2 列导航？
【发布时间】：2012-10-17 18:36:20
【问题描述】：

我希望通过使用单个 <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 解决方案吗？

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

【问题讨论】：

标签： html css navigation html-lists multiple-columns

【解决方案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 可以让您的生活更轻松。

【讨论】：

谢谢，但是，是的，这是个问题——在这种情况下，我可以重新订购它们，但因为这会响应：当它扩大时，订单会不同/不好。
有创意吗？好的。谢谢！也可以用<span>'s 来做到这一点，然后确保它在 IE 中工作......？
我想我现在会使用您的第一个解决方案，因为我的解决方案（看看另一个答案）很容易工作，但不是有效的 HTML。
有很多方法可以让它发挥作用:) 但不遵守规则迟早会有一些问题:) 保持清洁，你会得到回报。
你更了解你的设计......所以你可以选择对你有好处的东西......这些东西只是想法，它们可能会根据你的设计进行重新设计、组合等等......只是开始的想法:)祝你好运......你的想象力和一些测试将完成剩下的:)

【解决方案2】：

我认为使用<span> 可能是最适合跨浏览器的解决方案。

除非有人有其他想法？正在寻找跨浏览器兼容的东西，遗憾的是 IE 不支持nth-child(N)。

这并不像我想要的那样干净（HTML 明智），有这些随机跨度，但这里是 HTML：

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

（请注意 ul 中的 span — 我书中的大错误。）

还有 CSS：

nav span {
    width: 50%;
    float: left;
}

但这不是一个好的解决方案......还有其他想法吗？

【讨论】：