如何在反应中将标题放在导航栏的末尾？

Question

我是 css 和 React 的新手，我在网上的 reactjs 中找到了一个导航栏的代码，我正在尝试自己设计它的样式，目前它看起来像这样。

这就是我试图让它看起来像的东西

所以我唯一要做的就是将“样本”标题移到左侧。

我认为这是弯曲方向的问题，所以我将 justify-content:center 更改为 justify-content:flex-end 但那没有用。

这是我的反应代码

return (
        <>
            <Nav scrollNav={scrollNav}>
                <NavbarContainer>
                    <NavLogo to='/' onClick={toggleHome}>sample</NavLogo>
                    <MobileIcon onClick={toggle}>
                        <FaBars />
                    </MobileIcon>
                    <NavMenu>
                        <NavItem>
                            <NavLinks
                            to='about'
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>About</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to='experience' 
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>API for business</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to='blog'
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>Blog</NavLinks>
                        </NavItem>
                    </NavMenu>
                   

                </NavbarContainer>
            </Nav>
        </>
    )
}

export default Navbar

这是其中的样式部分


export const Nav = styled.nav`
  background: #FFF;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: left;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;

export const NavbarContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  z-index: 1;
  width: 100%;
  padding: 0 24px;
  max-width: 1100px;
`;

export const NavLogo = styled(LinkR)`
  color: #000;
  justify-self: center;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  margin-left: 2px;
  font-weight: bold;
  text-decoration: none;
`;

export const MobileIcon = styled.div`
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
    color: #fff;
  }
`;

export const NavMenu = styled.ul`
  display: flex;
  align-items: right;
  list-style: none;
  text-align: center;
  margin-right: 2px;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavItem = styled.li`
  height: 80px;
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavLinks = styled(LinkS)`
  color: #000;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;

  &.active {
    border-bottom: 3px solid #01BF71;
  }
`;

export const NavBtnLink = styled(LinkR)`
  border-radius: 50px;
  background: #FFFFFF;
  white-space: nowrap;
  padding: 10px 22px;
  color: #010606;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`;

我该如何解决这个问题？

Answer 1

在您的 NavbarContainer 中，您已将 max-width 属性设置为 1100px。

NavbarContainer 不会超过 1100px，因此不会填满整个 header。

这就是徽标不在最左侧的原因，您可以将 NavbarContainer 置于 justify-content:center 中心或将其设置为 flex-end。

如何在反应中将标题放在导航栏的末尾？

how to place title at end of a navigation bar in react?

css

flexbox

reactjs