Question

我正在尝试使用HTML和CSS创建一种圆柱列表。我已经尝试过使用浮点数和内联块，看起来内联块似乎是我最好的选择，因为我有以下要求：

布局应该在列中;
列数不应为“预设”，但应为自适应;
不得预设列的高度，但宽度可以是（如有必要）。

问题在于，当列表项的高度不同时，你会得到间隙，而我希望它们继续直接向下。

我正在使用这样的结构：

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之前，让我们看看您的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

现在，看看当你添加我的CSS时会发生什么，所有的垂直空间都被移除，而你有一个＆＃39;列＆＃39;对于每个级别的列表项：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你想取得别的成绩，请告诉我，我会修改我的答案。

CSS中的多列列表

1 个答案: