在并排的两个无序列表中对齐列表元素

Question

我正在尝试将两个无序列表的列表项侧边对齐，效果如下：

list element 1     list element 1
list element 2     list element 2
list element 3     list element 3 that
                   wraps
list element 4     list element 4

现在左侧的列表与右侧的列表不会换行，而是显示如下：

list element 1     list element 1
list element 2     list element 2
list element 3     list element 3 that
list element 4     wraps
                   list element 4

我可以帮您进行翻译。以下是您需要翻译的内容：

如何使它们正确地对齐？目前，我的设置如下：

CSS

.col {float:left;width:150px;}

html

<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>
<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>

thanks

- Thomas

---

我认为你应该使用table而不是列表。 - István Ujj-Mészáros

Answer 1

听起来你想展示表格数据，但不想使用HTML表格元素。这可能是因为在基于表格的设计时代之后，人们对表格产生了厌恶情绪。然而，应该注意到任何事物都有其适用场合和时间，<table>元素没有被弃用也是有充分的理由的。

很久以前，有一个名为<table>的元素，CSS甚至还未出现。为了让元素按照所希望的方式呈现，必须要将嵌套的表格串联在一起，这是一场噩梦。阅读、维护以及最初创建代码都很困难！然后，CSS出现了，所有人都视表格为过时和被禁止的东西。为什么？因为人们一直在错误地使用表格标记，把它放到本不应该存在的地方。

现在，很多人将相关数据的<ul>组成列来代替使用被禁止的<table>元素。但实际上，这和错误地使用表格一样糟糕。它会生成杂乱代码，对于屏幕阅读器理解代码起来困难，难以调试、难以维护，并且最终会依赖于浏览器hack或javascript进行样式设置。

然而，要执行这个hack来排列列表，你需要为<li>元素指定一个高度属性。具有静态高度，<li>的定位将变得可预测，实际上可以做到这一点。但是，这听起来并不是你所寻找的，因为<li>元素的高度是动态的。真正实现这一点的唯一方法就是使用jQuery或HTML表格，并动态确定<li>元素的高度，并将该高度应用于其他的<li>元素。使用jQuery来完成这项任务可能会导致未经样式处理的内容闪烁，特别是在较慢的连接和旧版浏览器上。我强烈建议你重新考虑你的HTML代码。

- Metagrapher

Answer 2

最简单且最清晰的选择是使用表格。

<table>
    <tr>
        <td class="col">
              <ul>
                <li> list element </li>
              </ul>
        </td>

        <td class="col">
              <ul>
                    <li> list element </li>
              </ul>
        </td>
    </tr>
</table>

- Amey