在等间距的列中布局 HTML 列表

Question

我想在 2/3 等间距的列中布置如下列表

<ul>
  <li>one<li>
  <li>two<li>
  <li>three<li>
  <li>four<li>
  <li>five<li>
  <li>six<li>
  <li>seven<li>
  <li>eight<li>
  <li>nine<li>
</ul>

一种解决方案是将列表分成两个列表并将其中一个向右浮动，可能带有边距，例如

  <div id="col2">
    <ul>
      <li>one<li>
      <li>two<li>
      <li>three<li>
      <li>four<li>
      <li>five<li>
    </ul>
  </div>

  <ul>
    <li>six<li>
    <li>seven<li>
    <li>eight<li>
    <li>nine<li>
  </ul>

#col2 {
    float: right;
    margin-right: 450px;
}

这行得通，但有许多缺点：

1. (Un)semantic markup - 它不是真正的 2 个列表，我将一个列表分成 2 个，只是为了更容易设置样式
2. 必须手动设置边距，使其看起来均匀分布
3. 如果浏览器足够窄，右侧的列将运行到第二列。

有没有更好的方法来做到这一点，最好不使用表格？

---

更新：

我尝试了Method 1，但我看到了一些奇怪的结果。如果您查看此3-column list，您会发现前两列中有“漏洞”。知道为什么吗？

Answer 1

来自 A List Apart 的This article 涵盖了普遍接受的、接近最佳实践的方法，以执行您所描述的操作。

Answer 2

我不知道你是否想要 2 直接低于 1 或者它是否可以在 1 旁边，例如：

    1    2    3
    4    5    6

因为如果是这种情况，您可以为 li 设置 33% 的固定宽度，然后将它们浮动或内联显示。

编辑：这基本上是文章 Rex M 提到的方法 1（只需阅读它，很好）：

您可以使用已经存在的 html、第一个完整列表并添加样式：

ul {
    width: 100%;        // for example
}
li {
    float: left;        // option 1
    display: inline;    // option 2, just one of the two
    width: 33%;         // for 3 columns, use 50% for two columns
}

文章里都有。

Answer 3

-s 的高度不同。尝试为 css 中的列表项设置固定高度。 你也可以使用类似的东西

border: 1px solid red;

作为列表项的规则之一，看看发生了什么。

我也在这里投票给一张桌子，因为使用方法一会破坏项目的顺序。但是，如果这对您来说不是问题，那就继续吧。

Answer 4

为什么不使用表格？这正是表的用途。