如何让导航锚点元素中的“How It Works”保持在同一行？

问题根源 #

1. 你给#nav-bar设置了grid-template-columns: repeat(3, 1fr)，这会强制把导航栏分成3个等宽列，当容器宽度不足时，How It Works所在列的宽度被压缩，导致文字换行。
2. .nav-link是行内元素（<a>标签默认是行内元素），设置width:100%不会生效，行内元素不支持宽高属性。

解决方案 #

方案1：使用Flex布局（更适合导航栏场景）

Flex布局在处理横向排列的元素时更灵活，能自动适配空间，同时可以轻松控制文字不换行：

修改CSS中导航栏相关代码：

#nav-bar {
  display: flex;
  gap: 2rem; /* 调整导航项之间的间距 */
}

.nav-link {
  white-space: nowrap; /* 强制文字保持在同一行 */
  /* 可选：添加内边距让点击区域更大 */
  padding: 0.5rem 1rem;
}

方案2：调整Grid布局（如果坚持用Grid）

如果想继续用Grid，需要避免列宽被过度压缩，同时强制文字不换行：

#nav-bar {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 用auto代替1fr，让列宽自适应内容 */
  gap: 2rem; /* 调整间距 */
}

.nav-link {
  white-space: nowrap; /* 强制文字不换行 */
}

额外修复：锚点链接错误 #

你的第二个导航链接href="how-it-works"缺少#，会导致点击时跳转到新页面而不是页面内锚点，应该改成：

<a href="#how-it-works" class="nav-link">How It Works</a>

完整修改后的代码示例 #

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/d76d298982.js"
      crossorigin="anonymous"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <header id="header">
      <div class="logo-guitar">
        <img
          src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4967c986-ec95-478c-9e95-c46800f3435e/ddd2cgg-233c6068-7609-42b9-b094-d0b8289d96c5.png/v1/fill/w_1280,h_1280,strp/commission__guitar_logo_by_comacrow_ddd2cgg-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI4MCIsInBhdGgiOiJcL2ZcLzQ5NjdjOTg2LWVjOTUtNDc4Yy05ZTk1LWM0NjgwMGYzNDM1ZVwvZGRkMmNnZy0yMzNjNjA2OC03NjA5LTQyYjktYjA5NC1kMGI4Mjg5ZDk2YzUucG5nIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.16vyN8nXmj6DHlloCriB0cMIuNssn0FwnyQayiDDSsg"
          alt="Store Logo"
          id="header-img"
          width="100px"
        />
      </div>
      <div class="luthier-name">
        <h1>Le Luthier Omar Forero</h1>
      </div>
      <div class="nav-bar-div">
        <nav id="nav-bar">
          <a href="#features" class="nav-link">Features</a>
          <a href="#how-it-works" class="nav-link">How It Works</a>
          <a href="" class="nav-link">Pricing</a>
        </nav>
      </div>
    </header>
  </body>
</html>

CSS（Flex版本）

body {
  background-color: #eff1ed;
}

/* Header and nav bar */
header {
  display: flex;
  align-items: center; /* 让header内元素垂直居中，优化布局 */
}
.logo-guitar {
  padding: 3%;
}
.luthier-name {
  width: 100%;
  padding-top: 3.5%;
}
#nav-bar {
  display: flex;
  gap: 2rem;
}
.nav-link {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  text-decoration: none; /* 可选：去掉链接下划线 */
  color: inherit; /* 可选：继承父元素文字颜色 */
}

内容的提问来源于stack exchange，提问作者OMAR FORERO