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

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.