如何用React.js实现横向排列的三链接菜单？

方法1：使用 CSS Flexbox（推荐） #

Flexbox是目前实现横向布局最简洁、灵活的方案，给菜单容器添加display: flex即可让链接默认横向排列。

示例代码：

import React from 'react';
import './Menu.css';

const Menu = () => {
  return (
    <div className="menu-container">
      <a href="/home" className="menu-link">首页</a>
      <a href="/about" className="menu-link">关于我们</a>
      <a href="/contact" className="menu-link">联系我们</a>
    </div>
  );
};

export default Menu;

对应的Menu.css：

.menu-container {
  display: flex;
  gap: 20px; /* 控制链接之间的间距 */
  align-items: center; /* 让链接垂直居中 */
}

.menu-link {
  text-decoration: none;
  color: #333;
}

方法2：使用 CSS inline-block #

给每个链接设置display: inline-block，既能保留块级元素的样式特性，又能实现横向排列。

示例代码：

import React from 'react';
import './Menu.css';

const Menu = () => {
  return (
    <div className="menu-container">
      <a href="/home" className="menu-link">首页</a>
      <a href="/about" className="menu-link">关于我们</a>
      <a href="/contact" className="menu-link">联系我们</a>
    </div>
  );
};

export default Menu;

对应的Menu.css：

.menu-link {
  display: inline-block;
  margin-right: 20px; /* 给每个链接添加右侧间距 */
  text-decoration: none;
  color: #333;
}

/* 移除最后一个链接的右侧间距，避免多余空白 */
.menu-link:last-child {
  margin-right: 0;
}

方法3：使用 CSS Float（不推荐） #

这是早期实现横向布局的方案，需要处理容器高度塌陷问题，现在更推荐用Flexbox替代。

示例代码：

import React from 'react';
import './Menu.css';

const Menu = () => {
  return (
    <div className="menu-container">
      <a href="/home" className="menu-link">首页</a>
      <a href="/about" className="menu-link">关于我们</a>
      <a href="/contact" className="menu-link">联系我们</a>
      <div className="clearfix"></div>
    </div>
  );
};

export default Menu;

对应的Menu.css：

.menu-container {
  overflow: hidden; /* 解决容器高度塌陷 */
}

.menu-link {
  float: left;
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}

/* 另一种清除浮动的方式 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

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