这是我时不时遇到的一个问题,我通常尝试从后端的 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)来获得如上面第二张图片那样的柱状外观?我的猜测是“不”,但我以前见过一些魔法,我想更明确地回答这个问题。
最佳答案
恐怕还没有。
CSS3 有一些不错的特性,参见示例 http://www.quirksmode.org/css/multicolumn.html但 Internet Explorer 不支持它,我不知道 IE9 中的支持情况如何(根据 Microsoft 目前在测试版中不存在)
关于css - 在按字母顺序排列的垂直 block 中对 html ul/li 列表进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4596341/