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

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 的出现，每个人都将表格视为过时和禁止的。为什么？因为人们一直在使用 table 标签，因为它不是有意的，将它拼凑到它不应该存在的地方。

现在，很多人拼凑<ul> s 相关数据成列表示表，怕用禁<table>元素。但事实是，这与滥用表格一样糟糕。它创建了面条式代码，屏幕阅读器难以理解、难以调试、难以维护，并且最终依赖浏览器 hack 或 javascript 进行样式设置。

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