html - CSS 中的多列列表

Question

我正在尝试创建一种仅使用 HTML 和 CSS 的分栏列表。我尝试过使用 float 和内联 block ，看起来内联 block 似乎是我最好的选择，因为我有以下要求:

• 布局应按列排列；
• 列数不应“预设”，而应自适应；
• 不得预设列的高度，但可以预设宽度(如果需要)。

问题是，当列表项的高度不相同时，就会出现间隙，而我希望它们继续直线下降。

我正在使用这样的结构:

CSS

.columnlist li {
    display:inline-block;
    vertical-align:top;
}

HTML

<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

有没有办法用 CSS 去除元素周围的垂直空间？

注意:我认为这样的事情可能会奏效，但是还有其他方法可以做到这一点吗？ Multi-column CSS lists

Answer 1

在添加我的 CSS 之前，让我们看看您的代码:

.columnlist li {
    display:inline-block;
    vertical-align:top;
}

<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

现在，看看当您添加我的 CSS 时会发生什么，所有垂直空间都被删除，并且每个级别的列表项都有一个“列”:

.columnlist li {
    display:inline-block;
    vertical-align:top;
}
ul, li, h6 {
    margin: 0;
    padding-top: 0;
}

<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

如果您想实现其他目标，请告诉我，我会修改我的答案。