CSS中的多列列表

时间:2015-04-19 10:27:39

标签: html5 css3

我正在尝试使用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

1 个答案:

答案 0 :(得分:-1)

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

&#13;
&#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;
&#13;
&#13;

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

&#13;
&#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;
&#13;
&#13;

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