在这种情况下如何使用字间距？

Question

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button span {
  word-spacing: 50px;
}

<div class="front-button">
  <span>
    <a href="#">CUSTOMIZE</a>
    <a href="#">DESIGNS</a>
    <a href="#">PLANS</a>
  </span>
  <a href="#">ABOUT US</a>
</div>

我想把文字定制、设计、计划和关于我们分开但是当我使用字间距时，about us 之间的 space 也会变大。我尝试过使用 span，但我不知道我是否使用正确。

Answer 1

我认为使用 margin 会更好

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button a {
  margin-right: 50px;
}

<div class="front-button">
  <a href="#">CUSTOMIZE</a>
  <a href="#">DESIGNS</a>
  <a href="#">PLANS</a>
  <a href="#">ABOUT US</a>
</div>

Answer 2

实际上您不想 space 输出单个单词，您希望在锚点 (a) 元素之间有 space。所以给他们每个人一个左右的边距。

.front-button {
  font-family: 'Bebas Neue';
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}

.front-button a {
  margin: 0 20px;
}

<div class="front-button">
  <a href="#">CUSTOMIZE</a>
  <a href="#">DESIGNS</a>
  <a href="#">PLANS</a></span>
  <a href="#">ABOUT US</a>
</div>

在这种情况下如何使用字间距？

How do I use word-spacing in this type of situation?

html

css

text

word-spacing