如何让Navbar链接横向排列而非垂直堆叠？

这是CSS层面的问题——导航栏选项的排列方式完全由CSS布局规则控制，和HTML结构无关（只要你的HTML是标准的导航层级结构）。

核心解决步骤： #

• 浏览器默认给<ul>（列表容器）加了内边距、外边距，且<li>（列表项）默认是display: block，这就是选项垂直堆叠的原因。
• 给导航列表添加flex布局，强制子元素水平排列：

/* 重置列表默认样式 + 开启水平布局 */
.navbar ul {
  list-style: none; /* 去掉默认圆点 */
  padding: 0;
  margin: 0;
  display: flex; /* 核心属性：让列表项横向排列 */
  gap: 1.5rem; /* 控制选项之间的间距，可按需调整 */
}

/* 优化导航容器，让选项垂直居中 */
.navbar {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem; /* 给导航栏添加上下内边距 */
  background-color: #ffffff; /* 可选：设置导航栏背景色 */
}

/* 优化链接样式，提升交互体验 */
.navbar a {
  text-decoration: none;
  color: #333333;
  padding: 0.5rem 1rem; /* 扩大点击区域 */
}

.navbar a:hover {
  background-color: #f5f5f5; /* 鼠标悬停时的背景高亮 */
  border-radius: 4px; /* 可选：圆角效果 */
}

配套标准HTML结构参考： #

如果你的HTML结构是下面这样，上面的CSS可以直接生效：

<nav class="navbar">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/sites">Sites</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/weather">Weather</a></li>
  </ul>
</nav>

内容的提问来源于stack exchange，提问作者Charlie Malue