如何在 CSS 中的 ul 内的 li 之间创建一个空格？答案

【问题标题】：How can I make a space between li inside of ul in CSS?如何在 CSS 中的 ul 内的 li 之间创建一个空格？
【发布时间】：2022-01-08 11:28:18
【问题描述】：

我想用 一条垂直线（Y 轴） 构建一个连接的 li 元素，这条直线从上到下 connected ，我做的设计效果很好，但是，我想在lis 之间添加一些垂直空间，我使用了margin，但是它分隔了垂直线。我该怎么做空格但保持垂直线connected。

ul{
  list-style:none;
}
li{
  border-left: .4rem solid #BBB;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  margin: 1.5rem 0;/*Here does space but they're not connected*/
  position:relative;
}
li::before{
  content:"";
  display:block;
  width:1.3rem; height:.4rem;
  background-color: #BBB;
  position:absolute;
  top:1rem;
  left:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Unordered List</title>
</head>
<body>
  
    <h1>Lorem ipsum dolor sit amet</h1>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>
</body>
</html>

【问题讨论】：

标签： css html-lists margin

【解决方案1】：

边距不是元素的一部分，因此线条不会显示在其中。

您可以使用填充来代替，但不是顶部和底部空间，而是要使其仅位于底部（否则您会在第一个元素的顶部得到一条虚假的线）。

但这意味着你想摆脱底部的虚假线，你可以使用 last-child 来做到这一点。

ul {
  list-style: none;
}

li {
  border-left: .4rem solid #BBB;
  padding-left: 1.5rem;
  padding-bottom: 3rem;
  font-size: 1.2rem;
  /* margin: 1.5rem 0;/*Here does space but they're not connected*/
  position: relative;
}

li::before {
  content: "";
  display: block;
  width: 1.3rem;
  height: .4rem;
  background-color: #BBB;
  position: absolute;
  top: 1rem;
  left: 0;
}

li:last-child {
  padding-bottom: 0;
}


}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Unordered List</title>
</head>

<body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>
</body>

</html>

【讨论】：

【解决方案2】：

删除您的margin 并将padding: 1.5rem 0 1.5rem 1.5rem; 用于您的空间。

【讨论】：