React实现响应式导航栏：移动端样式异常问题求助

我正在用React制作一个响应式Header，要求HOME与SUPPORT链接紧密排列，标题居中显示。该导航栏在桌面端显示正常，但切换到移动端后样式出现异常：

• 桌面端：HOME、SUPPORT链接居左紧密排列，标题在导航栏中央
• 移动端：标题被挤到两个链接下方，无法保持居中布局

以下是我的代码：

Header.js #

import React from 'react';
import style from './Header.module.css';
import { Link } from 'react-router-dom';

export default function Header() {
    return (
        <div className={style.Appbar}>
            <div className={style.float}><Link className={style.links} to="/">HOME</Link></div>
            <div className={style.float}><Link className={style.links} to="/support">SUPPORT</Link></div>
            <div className={style.floatV2}><p className={style.title} to="/GLA_invite">DESIGN FUTURE LONDON</p></div>
        </div>
    );
}

Header.module.css #

.Appbar {
  list-style-type: none;
  margin: 0;
  padding: 0 10%;
  overflow: hidden;
  background-color: #333;
}

.float {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
}

.floatV2 {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
}

.title {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
}

.links {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.links:hover {
  background-color: #111;
}

解决方案 #

问题根源在于float布局的局限性：在小屏幕下，浮动元素容易换行，导致标题无法保持居中。改用Flexbox布局可以更灵活地控制响应式结构，同时确保标题始终处于预期位置。

修改后的代码 #

Header.js

import React from 'react';
import style from './Header.module.css';
import { Link } from 'react-router-dom';

export default function Header() {
    return (
        <div className={style.Appbar}>
            <div className={style.navLinks}>
                <Link className={style.links} to="/">HOME</Link>
                <Link className={style.links} to="/support">SUPPORT</Link>
            </div>
            <div className={style.titleContainer}>
                <p className={style.title}>DESIGN FUTURE LONDON</p>
            </div>
        </div>
    );
}

Header.module.css

.Appbar {
  list-style-type: none;
  margin: 0;
  padding: 0 5%;
  background-color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  min-height: 60px;
}

.navLinks {
  display: flex;
  gap: 8px; /* 控制两个链接的间距，实现紧密排列 */
}

.links {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
}

.links:hover {
  background-color: #111;
}

.titleContainer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.title {
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
  margin: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .links {
    font-size: 18px;
    padding: 12px 10px;
  }

  .title {
    font-size: 18px;
  }

  .Appbar {
    padding: 0 3%;
  }
}

方案说明 #

1. Flexbox替代float：将Appbar设为flex容器，统一控制左侧链接组的排列，避免浮动导致的换行问题
2. 标题绝对居中：通过position: absolute配合transform: translateX(-50%)，让标题始终处于导航栏正中央，不受左右元素影响
3. 链接紧凑排列：用gap属性精准控制两个导航链接的间距，满足紧密排列的需求
4. 移动端适配：添加媒体查询，缩小字体和内边距，确保小屏幕下布局依然紧凑合理

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