css - 将动态多行列表项 float 到两列中

Question

我有一个动态列表，我需要使用 CSS 将其很好地排列成 2 列，但我在使用它时遇到了麻烦。

类似这样的标记:

<ul>
<li>A is for apples</li>
<li>B is for bananas which are yellow in color</li?
<li>C is for cupcakes</li>
....
</ul>

当我简单地给 li 一个宽度并将它们 float 到左侧时，它们会变得很有趣，最终的格式类似于:

A is for apples        B is for bananas which
                       are yellow in color
C is for cupcakes      D is for dirtbag

我需要格式化才能将第 3 个 li 直接放在第一个 li 的下方 - 无论任何一个列表项的高度如何，如下所示:

A is for apples        B is for bananas which
C is for cupcake       are yellow in color
D is for dirtbag

每个 li 的文本都是从数据库中提取的，我无法控制每个文本的长度。

澄清更新 - 该列表也可能像这样从数据库中出来:

<ul>
<li>A is for apples that grow on trees</li>
<li>B is for boat</li>
<li>C is for cupcakes</li>
<li>D is for dishes - that sure don't wash themselves</li>
....
</ul>

要求格式化:

A is for apples that   B is for boat
grow on trees          C is for cupcake
D is for dishes -      E is.....
that sure don't wash
themselves

/澄清

我的备用计划:顺序不是特别相关，所以我尝试将列表分成两半并在 2 个单独的 <ul> 中打印出两列以定义的宽度向左浮动，但每个 <li>具有可变高度并且数据库返回 2-15 个元素，使用该方法，列的底部看起来并不一致。如果可能的话，我宁愿找到一个更好的选择:/

Answer 1

恐怕在 IE 具有 css3 多列支持之前你就不走运了。

您当然可以使用它并为 IE 使用 javascript 解决方案(例如，有用于 jQuery 的多列插件)，但您的备份计划似乎是一个更简单的解决方案。