html - 如何在列表项之前保持一致性空间

Question

我有这个无序列表:

<ul>
<li><i class="fa fa-chevron-down"></i>Item 1</li>
<li><i class="fa fa-chevron-left"></i>Item 2</li>
<li>Item 3</li>
</ul>

如何使“元素”一词在左侧(而不是中间)垂直排列？ Item的第一个字母应该是垂直的。

问题是有时会有一个图标。有时不是。有时图标的大小会略有不同，例如向下和向左图标之间的差异。

这基本上是一个简单的 TreeView 显示。

Answer 1

给li一个固定的padding-left, position: relative 并使图标position: absolute;左边应该可以解决您的问题。

li {
  padding-left: 40px;
  position: relative;
}

li i {
  left: 0;
  position: absolute;
  top: 0;
}

此外，您还可以为图标设置宽度或最大宽度:

li i {
  left: 0;
  position: absolute;
  top: 0;
  max-width: 30px;
}