css – 按字母顺序垂直块排序html ul / li列表

这是我偶尔遇到的一个问题,我通常会尝试从后端角度进行解决,但是想知道是否有其他人在前端找到解决方案的神奇解决方案.

给定一个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>

通常情况下,将项目浮动并在块中以视觉方式水平排序非常容易,例如：

但是,要获取列,如下所示：

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

有没有办法将它全部保存在一个ul列表中而没有任何额外的标记,只使用CSS(没有JavaScript)来获得像上面第二个图像的柱状外观？我的猜测是“不”,但我之前看过一些魔术,我想更明确地回答这个问题.

解决方法

我还不害怕.

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

原文地址：https://www.jb51.cc/css/215046.html