如何在React项目中增加头部导航选项间的空白间距

我正尝试将Figma设计还原到React Web应用中，需要增加头部导航选项之间的空白间距，请问该如何实现？感谢解答！

Figma设计图链接：https://i.sstatic.net/yXGiA.jpg
当前Web应用效果链接：https://i.sstatic.net/yXGiA.jpg

相关代码 #

import styled from 'styled-components';
import LinkButton from '../../../components/LinkButton';
import { theme } from '../../../styles/theme';

export const HeaderWrapper = styled.header`
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 71.5px;
  width: 100%;
  padding: 80px 38px 0 50px;
  margin-bottom: 100px;
`;

export const Logo = styled.img`
  margin-left: 43px;
  height: 73px;
  width: 260px;
  margin-top: 10px;
`;

export const NavBar = styled.nav`
  margin-right: 43px;
  display: flex;
  padding-top: 5px;
  a {
    margin-left: 57px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: ${({ theme }) => theme.font.font3.new};
    font-weight: ${({ theme }) => theme.fontWeight.med_700};
  }
  a:first-of-type {
    margin-left: 0px;
  }
`;

export const NavButton = styled(LinkButton)`
  margin-left: 52px;
  text-transform: uppercase;
  font-size: 14px;
  font-family: ${({ theme }) => theme.font.font3.new};
  font-weight: ${({ theme }) => theme.fontWeight.med_700};
`;

export const customStyles = {
  overlay: {
    backgroundColor: 'rgba(30, 30, 30, .9)',
  },
  content: {
    position: 'absolute',
    width: '460px',
    height: '718px',
    top: '50%',
    left: '50%',
    background: '#111',
    border: `4px solid ${theme.colors.modal.border}`,
    borderRadius: '15px',
    boxSizing: 'border-box',
    transform: 'translate(-50%, -50%)',
  },
};

解决方案 #

要增加头部导航选项之间的空白间距，你可以通过以下两种方式修改代码：

方式一：调整导航链接的margin值 #

直接增大NavBar中a标签的margin-left数值，匹配Figma设计稿的间距要求即可，同时保留第一个链接的左边距清零设置：

export const NavBar = styled.nav`
  margin-right: 43px;
  display: flex;
  padding-top: 5px;
  a {
    margin-left: 70px; // 替换为你需要的间距值
    text-transform: uppercase;
    font-size: 14px;
    font-family: ${({ theme }) => theme.font.font3.new};
    font-weight: ${({ theme }) => theme.fontWeight.med_700};
  }
  a:first-of-type {
    margin-left: 0px;
  }
`;

方式二：使用Flex布局的gap属性（更简洁） #

利用Flex布局的gap属性统一设置所有导航项的间距，无需单独处理第一个元素的margin，代码更干净：

export const NavBar = styled.nav`
  margin-right: 43px;
  display: flex;
  padding-top: 5px;
  gap: 70px; // 这里设置你需要的间距值
  a {
    text-transform: uppercase;
    font-size: 14px;
    font-family: ${({ theme }) => theme.font.font3.new};
    font-weight: ${({ theme }) => theme.fontWeight.med_700};
  }
`;

如果需要调整导航按钮和最后一个导航链接的间距，修改NavButton的margin-left值即可，建议和导航项的间距保持一致。

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