列表中元素之间的垂直间距

时间:2015-10-12 23:55:01

标签: html css spacing

我有一个连续的元素列表。但是,因为容器中有太多列表,所以其中一些列表位于第二行。

如果元素已经设置了边距,我如何在这些元素的第一行和第二行之间添加额外的间距?

enter image description here

我希望第一行"测试"之间有更多的间距。 "测试"的第二行。我不希望两条线上方或下方的间距发生变化。我认为它与相邻的兄弟选择器有关吗?

1 个答案:

答案 0 :(得分:3)

提供以下CSS:

ul {line-height: 2; vertical-align: top;}

此CSS不会导致行间距。

<强>段

ul {display: block; width: 200px; list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; vertical-align: top;}
ul li {display: inline-block; width: 40px; line-height: 1;  vertical-align: top;}
ul {line-height: 2; vertical-align: top;}
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>