Question

我想实现以下目标：

IForecastResult

这是我正在使用的代码：

000 Lorem ipsum 
    dolor

0   Lorem ipsum 
    dolor

CSS：

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

您能用CSS帮助我使文本与之前的内容保持相等的距离吗？

“ Lorem”和“ dolor”需要保持在同一“垂直线”。

https://jsfiddle.net/ga6r8qsz/

谢谢。

Answer 1

使伪元素::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 2

在display: flex元素上使用li属性不仅会在:before伪元素和li标记之间赋予相等的间距，还会使{{1 }}标签在新行上对齐，如下所示。

li

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

Answer 3

您可以使用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 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>

在<li>文本和before内容之间添加空格

4 个答案: