如何在 CSS 中的 ul 内部的 li 之间创建一个 space？

Question

我想用 一条垂直线（Y 轴） 连接 li 个元素，从上到下的直线 connected，我做的设计效果很好，但是，我想在我使用的 li 之间添加一些 space 垂直margin 但它分隔了 垂直线。 我怎样才能做到 space 但保持垂直线 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>

Answer 1

删除您的 margin 并使用 padding: 1.5rem 0 1.5rem 1.5rem; 作为您的 space。

Answer 2

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

您可以改用填充，但您不想使用顶部和底部 space 而是将其放在底部（否则您会在第一个元素的顶部得到一条虚假的线）。

但这意味着你想摆脱底部的虚假线，你可以使用 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>

如何在 CSS 中的 ul 内部的 li 之间创建一个 space？

How can I make a space between li inside of ul in CSS?

css

html-lists

margin