html - 自动排列列表项，如表格列（书籍词汇表样式）

Question

我想要一个按字母顺序排列的列表。

问题：

1. 列表项将具有固定宽度
2. 列表将具有固定的高度。
3. 项目应在指定高度之后从顶部开始

请检查图像以供参考。：

我得到了什么

提前致谢！

Answer 1

您可以使用CSS3列轻松实现所需的行为。这是有关如何执行此操作的示例。

HTML：

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

CSS：

ul {
    -webkit-column-count: 3; /*3 is just a placeholder -- can be anything*/
    -moz-column-count: 3;
    column-count: 3;
    width: 300px; /*your fixed width*/
    height: 100px; /*your fixed height*/
}

结果：

Jquery Alternative： Taylor Smith 的一个很棒的插件Jquery column sort

我希望以任何方式有所帮助！