如何在 React.js 中让菜单的三个链接显示在同一行？

2026-11-04技术老齐

给三个菜单项的共同父元素设置 display: flex，就能让它们横向排列，再用 gap 调整间距。如果需要始终保持一行，可以显式设置 flex-wrap: nowrap。

为什么链接会纵向排列？

React 负责渲染元素，布局由 CSS 决定。<a> 默认是行内元素，但每个链接外面如果包着 <div> 或 <li>，菜单项通常就会纵向排列。已有样式中的 display: block、flex-direction: column 等规则也可能影响布局。

没有现有代码，还无法确定具体原因，可以先检查包裹菜单项的父元素。

使用 Flexbox 实现横向菜单

创建菜单组件，并引入样式文件：

import "./Menu.css";

export default function Menu() {
  return (
    <nav aria-label="主导航">
      <ul className="menu">
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </nav>
  );
}

在 Menu.css 中设置布局：

.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;

  margin: 0;
  padding: 0;
  list-style: none;

  overflow-x: auto;
}

.menu > li {
  flex-shrink: 0;
}

.menu a {
  white-space: nowrap;
}

display: flex 让 <ul> 的直接子元素 <li> 参与 Flexbox 布局。flex-direction: row 指定横向排列，菜单项之间的距离由 gap 控制。

flex-wrap: nowrap 让菜单项保持在同一行，white-space: nowrap 防止链接文字内部换行。容器过窄时，overflow-x: auto 允许横向滚动。

已有菜单需要注意什么？

display: flex 要加在三个菜单项的共同父元素上。如果结构是 ul > li > a，就设置在 <ul> 上；如果三个 <a> 直接放在 <nav> 中，就设置在 <nav> 上。

修改后如果仍然纵向排列，可以用浏览器开发者工具查看父元素的计算样式，确认 display: flex 和 flex-direction: row 已生效。还要检查是否存在 <br />，以及相关样式是否被其他 CSS 覆盖。

窄屏下如果允许菜单换行，可以改为 flex-wrap: wrap，并按需要移除横向滚动设置。