我正在尝试使用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
答案 0 :(得分:-1)
在添加CSS之前,让我们看看您的代码:
.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;对于每个级别的列表项:
.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;
如果你想取得别的成绩,请告诉我,我会修改我的答案。