Html 双线水平导航菜单

只是想知道是否有更简单的方法来实现这一点。这是我的dilema，我有8个类别，我希望每行4个，它们必须与上面的类别左对齐，以便它们都正确流动。我的第一个想法是创建4个ul，每个2个li，并用ul的内联块显示我的。但是我想知道使用css表是否更容易。有什么建议吗

这是密码

            <ul id="nav-one" class="products-header">
                <li><a>Lasers/Inkjet Sheet Labels</a></li>
                <li><a>Thermal Labels &amp; Ribbon</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Mailing Tabs &amp; Seals</a></li>
                <li><a>Contionous Pressure Sensitive Labels</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Tray &amp; Bag Tags</a></li>
                <li><a>Heat Seal Label Paper</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Repositionable Postal Notes</a></li>
                <li><a>Paper Labels</a></li>
            </ul>

---

在每个HTML页面上，您只能有一个id。因此，您的用户不能都将nav one作为其id。不过，您可以将其作为类添加。例如：

<ul class="nav-one products-header">
    <li><a>Lasers/Inkjet Sheet Labels</a></li>
    <li><a>Thermal Labels &amp; Ribbon</a></li>
</ul>

或分为两列：

1 2
3 4
5 6
7 8

我假设，您希望它们作为列

下面是我要做的：

HTML

<div class="container">
 <ul class="nav-ul">
  <li class="newline"><a>Lasers/Inkjet Sheet Labels</a></li>
  <li><a>Thermal Labels &amp; Ribbon</a></li>
  <li class="newline"><a>Mailing Tabs &amp; Seals</a></li>
  <li><a>Contionous Pressure Sensitive Labels</a></li>
  <li class="newline"><a>Tray &amp; Bag Tags</a></li>
  <li><a>Heat Seal Label Paper</a></li>
  <li class="newline"><a>Repositionable Postal Notes</a></li>
  <li><a>Paper Labels</a></li>
 </ul>
</div><!-- container -->

---

此代码尚未测试

是否愿意与我们共享您的代码？否则给你建议是不可能的？表是一个html元素！另外，您是否知道ul也可以水平上市！最后但并非最不重要的一点是，谷歌上有很多关于你想要实现的目标的例子。这个问题要么过于广泛，基于观点，要么会引起讨论，因此堆栈溢出是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的详细信息。

1 2
3 4
5 6
7 8

<div class="container">
 <ul class="nav-ul">
  <li class="newline"><a>Lasers/Inkjet Sheet Labels</a></li>
  <li><a>Thermal Labels &amp; Ribbon</a></li>
  <li class="newline"><a>Mailing Tabs &amp; Seals</a></li>
  <li><a>Contionous Pressure Sensitive Labels</a></li>
  <li class="newline"><a>Tray &amp; Bag Tags</a></li>
  <li><a>Heat Seal Label Paper</a></li>
  <li class="newline"><a>Repositionable Postal Notes</a></li>
  <li><a>Paper Labels</a></li>
 </ul>
</div><!-- container -->

.container {width: 100%; display: block; overflow: hidden;}
.nav-ul {list-style: none; margin: 0; padding: 0;}
.nav-ul li {float: left; margin: 0; padding: 0; width: 50%;}
.nav-ul .newline {clear: both; }