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