如何在每个 li 之间创建一个带有水平线的 ul？ [关闭]答案

【问题标题】：How to create a ul with horizontales lines between each li? [closed]如何在每个 li 之间创建一个带有水平线的 ul？ [关闭]
【发布时间】：2021-04-08 17:58:39
【问题描述】：

我有这个：

<ul>
    <li>bullet point</li>
    <li>bullet point</li>
    <li>bullet point</li>
</ul>

我怎样才能像这样添加水平线：

【问题讨论】：

您尝试过任何代码吗？可以分享一下吗？

标签： html css forms

【解决方案1】：

我使用了padding、::before 和background-gradient 的组合，其中我将黑色::before 元素放在灰色条纹渐变的顶部。使用 background-gradient 的积极作用是条纹的数量适应内容。

ul {
  --spacing-half: 0.5rem;

  list-style-type: none;
  padding: 0px;
}

li {
  padding-left: 3rem; 
  padding-bottom: 3rem;
  position: relative;
}

li {
  background: linear-gradient(to bottom,
      transparent var(--spacing-half), transparent var(--spacing-half),
      #cccccc var(--spacing-half), #cccccc calc(var(--spacing-half) + 3px),
      transparent calc(var(--spacing-half) + 3px));
     
  background-repeat: repeat-y;
  background-size: 11px 1rem;
  background-position: calc(var(--spacing-half) + 2px) 0px;
}

li::before {
  content: '';
  display: block;
  position: absolute;
  left: var(--spacing-half);
  top: var(--spacing-half);
  height: 3px;
  width: 15px;
  background-color: black;
}

<ul>
    <li>bullet point</li>
    <li>bullet point</li>
    <li>bullet point</li>
</ul>

【讨论】：

很好但很难理解:)

【解决方案2】：

这样的？

CSS 最初来自 HTML list-style-type dash，修改后使用 Horizontal Line Extension 和Horizontal bar

ul {
  margin: 0;
}

ul.dashed {
  list-style-type: none;
}

ul.dashed>li {
  text-indent: -5px;
}

ul.dashed>li:before {
  content: "⎯ ";
  text-indent: -5px;
}

ul.dashed>li.smaller:before {
  content: "―";

  text-indent: -5px;
}

<ul class="dashed">
  <li>bullet point</li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li>bullet point</li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li>bullet point</li>
</ul>

【讨论】：