对齐 HTML 和 CSS 中的文本和图标

Question

我想要它，这样所有图标都在它们所在的位置，右边的文本需要在图标和文本之间增加 space，这样所有文本都从同一个位置开始。

像这样：

ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT

而不是：

ICON TEXT
ICON   TEXT
ICON  TEXT
ICON TEXT
ICON  TEXT


<ul>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
</ul>

Answer 1

只需将这些文本放入标签中，然后添加几个像素的左填充。那会起作用的。如果可以 git 一些示例代码。解释会更容易。

.text{
  padding-left: 20px;
}

    
    <div class="elements">
      <span></span> 
      <span class="text">Home</span>
    </div>

Answer 2

要么使所有图标的宽度相同，要么使用 CSS 网格。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.width i {
  width: 1.5em;
}

ul.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.5em;
}
ul.grid > li {
  display: contents;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul class="width">
  <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li>
  <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li>
  <li><i class="fas fa-school"></i> <a href="example.com">school</a></li>
  <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li>
  <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li>
</ul>
<br>
<ul class="grid">
  <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li>
  <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li>
  <li><i class="fas fa-school"></i> <a href="example.com">school</a></li>
  <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li>
  <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li>
</ul>

对齐 HTML 和 CSS 中的文本和图标

Aligning text and icons in HTML and CSS

html

css

layout