在<li>文本和之前的内容之间添加间距

Question

我想实现这样的事情：

000 Lorem ipsum 
    dolor
0   Lorem ipsum 
    dolor

这是我正在使用的代码：

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

.CSS：

li:before {
  content: "0";
}
li:first-child:before {
  content: "000";
}
ul {
  width:100px;
  list-style: none;
}

你能帮我使用 CSS 让文本与之前的内容保持平等的距离吗？

">

Lorem"和"dolor"需要保持在同一条"垂直线"上。

https://jsfiddle.net/ga6r8qsz/

谢谢。

Answer 1

您可以使用before元素上的绝对定位来执行此操作。这将确保您的li项目保持垂直排列。

li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
}
li::before {
  content: "0";
  position: absolute;
  width: 35px;
  left: -35px;
}
li:first-child::before {
  content: "0000";
}
ul {
  width: 100px;
  list-style: none;
}

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

Answer 2

使伪元素像块一样::befores，这样您就可以添加它们的宽度并以这种方式控制列表的视图

这里的例子：

li:before {
  content: "0";
  display:inline-block;
  width:35px;
}
li:first-child:before {
  content: "000";
  display:inline-block;
  width:35px;
}
ul {
  width:300px;
  list-style: none;
}

<ul>
  <li>some text</li>
  <li>some text more</li>
</ul>

Answer 3

在li元素上使用 display: flex 属性不仅可以在:before伪元素和li标签之间提供相等的间距，而且还会使li标签在新行上左对齐，如下所示。

li {
  display: flex;
}
li:before {
  content: "0";
  width:70px;
}
li:first-child:before {
  content: "000";
}
ul {
  width:150px;
  list-style: none;
}

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
</ul>

Answer 4

这是一个不需要使用任何固定宽度值的想法。考虑一个表格布局，它将适用于任何伪元素内容：

li:before {
  content: "0";
  display:table-cell;
  padding-right:5px;
}
li:first-child:before {
  content: "000";
}
ul {
  width:200px;
  list-style: none;
  display:table;
}
li {
  display:table-row;
}

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>