Question

从此屏幕截图中可以看出，我的图标与其标题不对齐。它们被写成两个无序列表。我现在唯一的解决方案是为每个图标提供个人margin-left，但我希望有更好的方法。非常感谢任何帮助。 Screenshot

HTML：

<!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul>
    <li><i class="icon-prog-java"></i></li>
    <li><i class="icon-prog-js02"></i></li>
    <li><i class="icon-html5-02"></i></li>
    <li><i class="icon-css3-02"></i></li>
    <li><i class="icon-vc-git"></i></li>
  </ul>
  <ul>
    <li>Java</li>
    <li>JavaScript</li>
    <li>HTML / XML</li>
    <li>CSS</li>
    <li>Git</li>
  </ul>
</section>

CSS：

#skills li {
  display: inline;
  margin: 0 40px;
}

Answer 1

@MrFusion有更好的答案。请选择那种方法。

但如果您不希望图标和文字相同ul，请尝试为li定义固定宽度。

#skills li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

Answer 2

将图标与每个文本项集成。然后，通过使图标成为块元素，使图标位于单独的行上。此外，每个列表项都必须是inline-block而不是inline：

#skills li {
  display: inline-block;
  margin: 0 30px;
  text-align: center;
}
ul.skill-list i {
  display: block;
  /* add margins here to adjust icons */
}

<!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul class="skill-list">
    <li><i class="icon-prog-java"></i>Java</li>
    <li><i class="icon-prog-js02"></i>JavaScript</li>
    <li><i class="icon-html5-02"></i>HTML / XML</li>
    <li><i class="icon-css3-02"></i>CSS</li>
    <li><i class="icon-vc-git"></i>Git</li>
  </ul>
</section>

<!-- Pictonic library, ignore this -->
<link href="https://cdn.rawgit.com/thedrick/tylerhedrick.me/master/resources/pictonic/css/pictonic.css" rel="stylesheet" />

Answer 3

如果我要创建这个，我会有一个列表项分组。每个

都会有图标的img标记以及标记或任何其他块级元素。这允许我将我的CSS范围扩展到

，并且所有这些都会受到我的样式的影响。这就像为我的图标和标题创建单独的统一框。您现在使用的方法使其变得复杂。如果将来发生变化，您将有两个方面需要关注。

如果您希望继续沿着这条路走下去，尽管您可以尝试给#skills li一个固定的宽度，它们应该排成一行。

如何将图标与其标题对齐？

3 个答案: