html - 当带有字体图标的文本用作链接时，如何在导航栏中的字体图标之间保持相等的间距？

这是我的导航栏代码：

body {
  margin: 0;
}

.navbar {
  display: inline-block;
  background-color: #495057;
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  text-align: center;
  float: left;
}

.navbar ul li {
  display: inline-block;
  padding-right: 20px;
}

.navbar ul li a {
  text-decoration: none;
  color: #adb5bd;
}

.navbar ul li a:hover {
  color: white;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>

<div class="navbar">
  <ul>
    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>test</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>123test123</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>12345test12345</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>12test12</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>1test1</div>
      </a>
    </li>
  </ul>
</div>

在这里，我使用了字体图标以及链接名称。但是，实际上所有链接名称的长度都不相等。这就是为什么使用上面的代码，输出看起来非常糟糕，因为每个字体图标后的空格都不相等。尽管每个链接的padding-right均为20px，并且它们之间的间距均等，但对于链接名称的可变大小，字体图标的间距不均。

我想要的输出是：所有字体图标将位于相等的空间中，而不管链接名称之间的空间如何。如下图所示：



我未能实现这一目标。

最佳答案

您可以使用CSS flexbox，并在justify-content:space-between(around)中使用ul

body {
  margin: 0;
}

.navbar {
  background-color: #495057;
  width: 100%;
}

.navbar ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
  list-style-type: none;
  padding: 20px
}

.navbar ul li a {
  text-decoration: none;
  color: #adb5bd;
}

.navbar ul li a:hover {
  color: white;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<div class="navbar">
  <ul>
    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>test</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>123test123</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>12345test12345</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>12test12</div>
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fas fa-font"></i>
        <div>1test1</div>
      </a>
    </li>
  </ul>
</div>

关于html - 当带有字体图标的文本用作链接时，如何在导航栏中的字体图标之间保持相等的间距？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50783036/