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>

感谢

Answer 1

听起来您试图在不使用HTML表格的情况下显示表格数据。这背后的动机很可能是对基于后表设计时代的表格的厌恶。但是，应该注意的是，所有内容都有时间和地点，并且有一个很好的理由不推荐使用<table>元素。

曾几何时，有一个名为<table>的元素。 CSS甚至不是母亲眼中的闪光点。为了使元素按照您的意愿显示，您必须将一组嵌套表串起来。这是一场噩梦。阅读代码，维护代码以及首先创建代码是一场噩梦！随之而来的是CSS，所有人都避免将桌子视为过时和禁止。为什么？因为人们一直在使用表格标签，因为它不是有意的，将它拼凑到没有生意的地方。

现在，由于担心使用禁用的<ul>元素，许多人将<table>的相关数据拼凑成列来表示表格。但事实是，这与滥用表格一样糟糕。它创建了意大利面条代码，屏幕阅读器难以理解，难以调试，难以维护，最终依赖浏览器黑客或javascript进行样式化。

但是，要执行此hack，要排列这样的列表，您必须为li元素指定height属性。使用静态高度，li定位变得可预测，您实际上可以执行此操作。但是，这听起来并不像你想要的那样，因为听起来li3需要具有流畅的高度。真正做到这一点的唯一方法是使用jQuery或HTML表并动态确定li3的高度并将该高度应用于其他li3。使用jQuery来实现这一点可能会导致无格式内容的闪现，特别是在较慢的连接和较旧的浏览器上。我强烈建议您重新考虑HTML。

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>

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

2 个答案: