css - 在按字母顺序排列的垂直 block 中对 html ul/li 列表进行排序

Question

这是我时不时遇到的一个问题，我通常尝试从后端的 Angular 解决这个问题，但我想知道其他人是否找到了在前端解决这个问题的神奇解决方案。

给定一个 ul/li 列表，在标记中按字母顺序从 a-z 提供:

<ul>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
    <li>Golf</li>
    <li>Hotel</li>
    <li>India</li>
    <li>Juliet</li>
    <li>Kilo</li>
    <li>Lima</li>
    <li>Mike</li>
    <li>November</li>
    <li>Oscar</li>
    <li>Papa</li>
    <li>Quebec</li>
    <li>Romeo</li>
    <li>Sierra</li>
    <li>Tango</li>
    <li>Uniform</li>
    <li>Victor</li>
    <li>Whiskey</li>
    <li>X-ray</li>
    <li>Yankee</li>
    <li>Zulu</li>
</ul>

通常，很容易将元素 float 到左侧并按 block 在视觉上水平排列它们，如下所示:

但是，要像这样获取列:

我总是不得不将 HTML 分解成单独的实体，例如四个单独的 <ul>上例中的元素。

有没有一种方法可以将所有内容都保存在一个 ul 列表中，而无需任何其他标记，仅使用 CSS(无 JavaScript)来获得如上面第二张图片那样的柱状外观？我的猜测是“不”，但我以前见过一些魔法，我想更明确地回答这个问题。

Answer 1

恐怕还没有。

CSS3 有一些不错的特性，参见示例 http://www.quirksmode.org/css/multicolumn.html但 Internet Explorer 不支持它，我不知道 IE9 中的支持情况如何(根据 Microsoft 目前在测试版中不存在)