如何在没有足够内容的情况下使我的导航栏适合最大宽度值？

Question

所以我有一个导航栏，它有大约 4 个链接，我需要它是一个特定的宽度，我希望它是响应式的，所以我使用了 max-width: 65em，但是这导致它不是 65em，除非由于导航栏的性质，里面有很多内容是不存在的。

如何使我的导航栏内容具有 65em 的宽度，同时在我减小屏幕尺寸时保持响应？我是否必须处理媒体查询和断点，是否有解决方案？

导航栏代码：

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

Answer 1

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  width:100% ;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

尝试以百分比形式为导航指定宽度。我已经给了 100%，你可以根据你的方便更改它。尝试运行此代码。我希望这能解决您的问题。

如何在没有足够内容的情况下使我的导航栏适合最大宽度值？

How to make my navbar fit the max width value while not having enough content?

css

width

reactjs

styled-components