我如何关闭顶部导航栏上的字母间隙

Question

所以每个单词之间都有字母 spacing/gap，我想将其最小化，但是当我尝试这样做时，唯一缩小的是按钮本身。

.navbar {
  position: fixed;
  top: 0;
  right: 7%;
  z-index: 10;
  display: flex;
  text-align: center;
  display: table;
}

.navbar ul {
  flex: 1;
  text-align: right;
  padding: 40px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 30px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 30px;
  background: transparent;
}

.navbar ul li a {
  color: #6dffe7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
  cursor: pointer;
}

body { background: black; }

<div class="page">
  <nav class="navbar">
    <ul>
      <div class="download-btn">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="Alberto Aday Resume.docx" class="btn"> Download Resume</a></li>
      </div>
    </ul>
  </nav>
</div>

感谢您的帮助

Answer 1

在我看来你使用 bootstrap 如果你这样做那么你将需要在 css

中的任何样式之后使用 !important

Answer 2

看图片，您似乎想要调整导航项间距而不是字母 spacing/gap。
您可以尝试在导航栏 ul 和 li 子项上调整 paddings/margins。
此外，您在 .navbar 上有重复的显示道具，您可以删除一个。

.navbar {
  background-color: #12182b;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  text-align: center;
}

.navbar ul {
  flex: 1;
  text-align: right;
  padding: 20px;
  background: transparent;}.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  background: transparent;
}

.navbar ul li a {
  color: #6dffe7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
  cursor: pointer;
}

<nav class="navbar">
  <ul>
    <div class="download-btn">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
      <li>
        <a href="Alberto Aday Resume.docx" class="btn"> Download Resume</a>                     </li>
    </div>
  </ul>
  </nav>

Answer 3

我认为您正在尝试重新创建所提供图像中描述的导航栏。因此，您需要遵守以下规则：

具有固定高度的水平导航栏（我假设它是 100px）。
除按钮外的所有链接都应显示在左侧并以一定间隔分隔。
“下载继续”按钮需要显示在导航栏的右侧。
导航栏的左右两侧应该有一些填充（我假设这是 2rem）。

为此，您需要在导航栏上设置 flex 布局，以便我们可以使用 align-items: center 将链接在导航栏内垂直居中。然后我们需要在 ul 本身上设置 flex 布局，并给它 flex-direction: row 和一些 gap: 2rem.
现在要将按钮放置在导航栏的最右侧，您需要将其从导航栏内的 ul 中删除，并将其作为同级放置在其下方。并在导航栏上设置 justify-content: space-between。这应该将链接移到最左边，将按钮移到最右边。
此外，我们可以通过给导航栏一个 background-color 和 color 来设置视觉样式。然后我们将这种颜色继承到锚链接 a。我们还在 ul 和 a 上分别设置 list-style: none 和 text-decoration: none，以实现问题中链接的图像的外观。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navbar {
  padding: 0 2rem;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #12182b;
  color: #6dffe7;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  gap: 2rem;
}

.navbar ul a {
  font-size: 0.9em;
  color: inherit;
  text-decoration: none;
}

.navbar .btn {
  font-size: 0.9em;
  border: 2px solid #6dffe7;
  padding: 0.6em;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

<div class="page">
  <nav class="navbar">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a href="Alberto-Aday-Resume.docx" class="btn">Download Resume</a>
  </nav>
</div>

我如何关闭顶部导航栏上的字母间隙

How do i close the letter gap accross my navbar at the top

html

css

navbar