我有这个无序列表：
<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>
如何让“项目”一词在左侧（而不是中间）垂直排列？项目的第一个字母应该是垂直的。
问题是有时会有一个图标。有时不是。并且有时图标的大小会略有不同，例如向下和向左图标之间的差异。
这基本上是一个简单的树形视图显示。
【问题讨论】：
<i>上做vertical-align:top;
您将需要固定宽度的图标来完成您的要求。除非有固定宽度，否则无法对齐项目。从版本 3.1.1 开始，您可以使用类 icon-fixed-width 和自版本 4.0 以来的 fa-fw 为 font-awesome 图标添加固定宽度。这给出了1.28571429em 的固定值，这很烦人，但始终如一。
不幸的是，CSS 没有 :parent 选择器，因此您可能需要向 <li> 标签添加一个类，指定它们是否包含图标：
<ul>
<li class="yes"><i class="fa fa-fw fa-chevron-down"></i>Item 1</li>
<li class="yes"><i class="fa fa-fw fa-chevron-left"></i>Item 2</li>
<li>Item 3</li>
</ul>
li:not(.yes) {
padding-left: 1.28571429em;
}
我在这里创建了一个小提琴：http://jsfiddle.net/3qwkkg4a/1/
当然，您总是可以将类放在不包含图标的<li> 标签上，或者在这个特定示例中只使用li:nth-of-type(3) 定位第三个标签；)
希望这会有所帮助！ :)
编辑
这些类也可以通过 jQuery 添加，假设您有访问权限，使用：
$('li:has(i)').addClass('yes');
可以在此处看到展示这一点的小提琴，而 HTML 保持不变：
【讨论】：
$('li:has(i)').addClass('yes'); 解决问题，这将即时创建相关类。我在我的答案中添加了一个新的小提琴来展示这一点。否则，恐怕您的 only 选项是以某种方式修改条件后端逻辑中的类。
给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;
}
【讨论】：
尝试将文本放在一个跨度中并使用下面的 css 代码
<ul>
<li><i class="fa fa-chevron-down"></i><span>Item 1</span></li>
<li><i class="fa fa-chevron-left"></i><span>Item 2</span></li>
<li>Item 3</li>
</ul>
和css
ul li i{vertical-align:middle}
ul li span{vertical-align:middle}
希望它能解决你的问题
【讨论】：