这是我不时遇到的一个问题,我通常尝试从后端的角度解决,但想知道其他人是否找到了一个神奇的解决方案来解决前端的这个问题。
给定一个 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>
通常,将项目向左浮动并在视觉上以块的形式对它们进行水平排序非常容易,如下所示:
但是,要获取列,如下所示:
我总是不得不将 HTML 分解为单独的实体,例如<ul>
上面示例中的四个单独的元素。
有没有一种方法可以将它全部保存在一个 ul 列表中而无需任何额外的标记,只使用 CSS(无 JavaScript)来获得像上面第二张图片那样的柱状外观?我的猜测是“不”,但我以前见过一些魔法,我想更明确地回答这个问题。