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

Question

您可以从此屏幕截图中看到，我的图标与其标题未对齐。它们被写为两个无序列表。我目前唯一的解决方案是为每个图标分别设置margin-left，但我希望有一种更好的方法。任何帮助将不胜感激。

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

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

Answer 2

@ MrFusion的答案更好。请首选该方法。

Answer 3

如果要创建此列表，则将有一个列表项分组。每个