如何使用 CSS 获取 li 标签之间的垂直空间

Question

我想在我的一个列表项中的每个 <li> 标记之间获得垂直空间。我使用 CSS Grid 进行了尝试，但随后我获得了相等的垂直空间并且即使只有一行句子也有不必要的额外空间。希望任何人都可以帮助我找到解决方案。以下是代码。提前致谢！

html {font-family: Arial, Helvetica, sans-serif;}   
a {color:#555;text-decoration:none;}
.container {padding: 1.5rem;background-color: #cdcdcd;margin: 1rem;/* width: 50%; *//* border: 1px solid red; */}

@media only screen and (min-width:567px) {
.container {padding:3rem;background: #f9f9f9;}    
}

.list {
    background: #fff;
}
.list__ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    border:1px solid red;
}
.list__item {
    display: flex;
    align-items: flex-start;
    break-inside: avoid-column;
}

.list__item:before {
    content: "";
    width: .10rem;
    height: .1rem;
    padding: 2px;
    background-color: transparent;
    border: solid #555;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-right: .75rem;
    margin-top: .25rem;
}
.list__link {
    text-decoration: none;
    color: #666;
}

<div class="container">
    <div class="list">
        <ul class="list__ul">
            <li class="list__item"><a href="#" class="list1__link">One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens.</a></li>
            <li class="list__item"><a href="#" class="list1__link">Two Default value One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens</a></li>
            <li class="list__item"><a href="#" class="list1__link">Three Sequential navigation </a></li>
            <li class="list__item"><a href="#" class="list1__link">Four Algorithm specification</a></li>
            <li class="list__item"><a href="#" class="list1__link">Five Dynamic Sources</a></li>
            <li class="list__item"><a href="#" class="list1__link">Six Auto Placement</a></li>
            <li class="list__item"><a href="#" class="list1__link">Seven Task Allocation</a></li>
            <li class="list__item"><a href="#" class="list1__link">Eight Implicit Contents</a></li>
            <li class="list__item"><a href="#" class="list1__link">Nine Absolute Specification</a></li>
        </ul>
    </div>
</div>

Answer 1

为 li 元素添加填充，如果你只想将它隔离到这个 ul 列表中，那么使用类似的东西：

.list__ul li {
     padding-top: 20px;
}

跳过第一个 li 元素：

.list__ul li:nth-child(1n+2) {
     padding-top: 20px;
}

为了也有垂直空间使用 padding-right 或 padding-left 或尝试在类元素 list__item 中使用 padding。

Answer 2

您可以在list__item class.e.g 中简单地添加您想要的空间的margin-bottom。我正在使用margin-bottom: 10px;。这将解决您的问题。

.list__item {
    display: flex;
    align-items: flex-start;
    break-inside: avoid-column;
    margin-bottom: 10px;
}
.list__item:last-child {
                margin-bottom: 0px;
            }

Answer 3

如果你给 ul 元素添加一个 after 伪元素，你可以将它的高度设置为 ul 的高度减去每个 li 的填充。

然后在这个伪元素上设置边框，而不是在ul上。

如果重要的是 ul 只占用看起来好像占用的空间，则将其下边距设置为减去每个 li 的填充。

html {
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: #555;
  text-decoration: none;
}

.container {
  padding: 1.5rem;
  background-color: #cdcdcd;
  margin: 1rem;
  /* width: 50%; */
  /* border: 1px solid red; */
}

@media only screen and (min-width:567px) {
  .container {
    padding: 3rem;
    background: #f9f9f9;
  }
}

.list {
  background: #fff;
}

.list__ul {
  list-style: none;
  padding-bottom: -20px;
  margin: 0;
  column-count: 2;
  position: relative;
}

.list__ul::after {
  content: '';
  position: absolute;
  width: 100%;
  display: inline-block;
  left: -1px;
  top: -1px;
  height: calc(100% - 10px);
  z-index: 1;
  border: 1px solid red;
}

.list__item {
  display: flex;
  align-items: flex-start;
  break-inside: avoid-column;
  padding-bottom: 10px;
}

.list__item:before {
  content: "";
  width: .10rem;
  height: .1rem;
  padding: 2px;
  background-color: transparent;
  border: solid #555;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-right: .75rem;
  margin-top: .25rem;
}

.list__link {
  text-decoration: none;
  color: #666;
}

<div class="container">
  <div class="list">
    <ul class="list__ul">
      <li class="list__item"><a href="#" class="list1__link">One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens.</a></li>
      <li class="list__item"><a href="#" class="list1__link">Two Default value One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens</a></li>
      <li class="list__item"><a href="#" class="list1__link">Three Sequential navigation </a></li>
      <li class="list__item"><a href="#" class="list1__link">Four Algorithm specification</a></li>
      <li class="list__item"><a href="#" class="list1__link">Five Dynamic Sources</a></li>
      <li class="list__item"><a href="#" class="list1__link">Six Auto Placement</a></li>
      <li class="list__item"><a href="#" class="list1__link">Seven Task Allocation</a></li>
      <li class="list__item"><a href="#" class="list1__link">Eight Implicit Contents</a></li>
      <li class="list__item"><a href="#" class="list1__link">Nine Absolute Specification</a></li>
    </ul>
  </div>
</div>