在均匀间隔的列中布置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)语义标记 - 它不是真正的2个列表,我将单个列表拆分为2个,只是为了让它更容易风格化
2. 边距必须手动设置为能够均匀分布的外观
3. 如果浏览器足够窄,右侧列将进入第二列.

有没有更好的方法来做到这一点,最好不使用桌子？

---

更新:

我尝试了方法1,但我看到了一些奇怪的结果.如果您查看这个3列列表,您会看到前2列中有"漏洞".知道为什么吗？

Answer 1

A List Apart的这篇文章涵盖了我们可以获得的方法,这些方法可以实现您所描述的内容.