2

我希望通过使用<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>也可以在每组三个 's 周围包裹标签<li>——但这是唯一的 CSS 解决方案吗？

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

4

2 回答 2

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

于 2012-10-27T22:52:29.977 回答
-1

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

除非有人有其他想法？寻找跨浏览器兼容的东西，遗憾的是 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>

（注意我书中span的ul- 大失礼。）

和CSS：

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

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

于 2012-10-27T23:47:09.220 回答