按字母顺序排列的html ul/li列表排序

arx*_*ica 7 css html-lists alphabetical

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

给定一个ul/li列表,按字母顺序在标记中提供,来自az:

<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>
Run Code Online (Sandbox Code Playgroud)

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

一个带有li元素的UL/LI列表向左浮动

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

四个UL/LI列表,其中ul元素向左浮动

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

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

jer*_*oen 4

还没有,我\xc2\xb4m 害怕。

\n\n

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

\n

  • ...抱怨,抱怨,#@!%^&amp; IE,抱怨...:p (2认同)