如何將標題放在導航欄的末尾以做出反應？

我是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;
  }
`;

我該如何解決這個問題？

uj5u.com熱心網友回復：

在您的NavbarContainer中，您已將max-width屬性設定為 1100px。

NavbarContainer 不會超過 1100 像素，因此不會填充整個標題。

這就是為什么徽標不在最左側的原因，您將 NavbarContainer 居中justify-content:center或設定它flex-end。

標籤：

上一篇：HTML表單，在div內時不回應

下一篇：如何訪問和更改具有相同名稱的多個類并回圈訪問它們以在單擊時向它們添加css更改？