Question

如何正确地将<li>与一个Font Awesome图标对齐，而不使用nth-child，因为标记会动态显示？

＆＃13;

ul {
  list-style: none;
}
li {
  padding-left: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li><i class="fa fa-tag"></i> <a href="#">#Jobs</a></li>
  <li><a href="#">#Interview</a></li>
</ul>

＆＃13;

我想要的基本上是这样的：

[fa] #Jobs
     #Interview

Answer 1

使用伪元素:before作为图标。

＆＃13;

ul {
  list-style: none;
}
li {
  padding-left: 5px;
}
li:before {
  content: "";
  display: inline-block;
  width: 20px;
}
li:first-child:before {
  font-family: "FontAwesome";
  content: "\f02b";
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li><a href="#">#Jobs</a></li>
  <li><a href="#">#Interview</a></li>
</ul>

＆＃13;

Answer 2

我不喜欢这种技巧，但它有时很有用：你可以在所有 li 上放一个更大的填充，并在类 fa上留下一个负边距

<强> CSS

ul {
  list-style: none;
}
li {
  padding-left: 30px;
}
li .fa {
  margin-left: -18px;
}

<强> HTML

<ul>
  <li>
    <i class="fa fa-tag"></i>
    <a href="#">#Jobs</a>
  </li>
  <li>
    <a href="#">#Interview</a>
  </li>
  <li>
    <a href="#">#AnotherOneWithoutTag</a>
  </li>
  <li>
    <i class="fa fa-tag"></i>
    <a href="#">#AnotherOneWithTag</a>
  </li>
</ul>

这样做，您不必关心图标的存在与否。

Answer 3

尝试为每个没有字体的li添加一个类，就像这样;

<li><a class="noFontAwesome" href="#">#Interview</a></li>

http://jsfiddle.net/wt7hsdgq/2/

或使用此代码段：

ul {
  list-style: none;
}
li {
  padding-left: 5px;
}
li .fontAwesome:before {
  font-family: "FontAwesome";
  content: "\f02b";
  margin-right: 5px;
  margin-left: -1.3em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li><a class="fontAwesome" href="#">#Jobs</a></li>
  <li><a href="#">#Interview</a></li>
</ul>

使用单个字体真棒图标对齐列表项

3 个答案: