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;
}

这样可行，但有许多缺点：

（Un）语义标记 - 它不是真正的2个列表，我将单个列表拆分为2，只是为了使其更容易设置样式
必须手动设置边距，使其外观均匀
如果浏览器足够窄，右侧列将进入第二个。

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

更新

我尝试了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

＆lt; li＆gt; -s的高度不同。尝试在css中为列表项设置固定高度。你也可以使用像

这样的东西

border: 1px solid red;

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

我也在这里投票，因为使用方法一打破了项目的顺序。但如果这不是你的问题，那就继续吧。

Answer 4

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

在均匀间隔的列中布置HTML列表

更新

4 个答案: