css - CSS无序列表，带点全块宽度下划线

Question

我如何制作一个像屏幕截图中的有序列表？重要的是每个项目都有一个全宽的虚线下划线。

谢谢 样品订购清单

Answer 1

请查看并运行代码片段以获得您想要的输出。

ul > li {
  color: grey;
  border-bottom: thin dashed grey;
}

<ul>
  <li> Terms of Use </li>
  <li> Privacy Policy </li>
</ul>

随班级更新mylist

ul.mylist > li {
  color: grey;
  border-bottom: thin dashed grey;
}

<ul class="mylist">
  <li> Terms of Use </li>
  <li> Privacy Policy </li>
</ul>

Answer 2

将无序列表 ( <ul>) 与 结合使用border-bottom，如下所示：

li {
  border-bottom: 1px dashed gray
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>B</li>
</ul>

Answer 3

您可以简单地为每个 li 项目添加border-bottom。

ul li {
  border-bottom: 1px dashed #000;
}

此外，您可以添加一些填充：

ul li {
  padding: 1em 0;
  border-bottom: 1px dashed #000;
}

Answer 4

检查一下，添加虚线边框。

ul li{
  border-bottom: dotted 1px #ccc;
}

<ul>
  <li>term of use</li>
  <li>Privecy Policy</li>
  <li>Refund Policy</li>
</ul>