如何将标题放在导航栏的末尾以做出反应？答案

【问题标题】：how to place title at end of a navigation bar in react?如何将标题放在导航栏的末尾以做出反应？
【发布时间】：2022-01-28 01:59:53
【问题描述】：

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

这就是我想让它看起来像的样子

所以我唯一想做的就是将“示例”标题放在左侧。

我认为这是 flex 方向的问题，所以我将 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;
  }
`;

我该如何解决这个问题？

【问题讨论】：

截图是justify-content: center;还是justify-content: flex-end;？删除 NavbarContainer 中的 max-width: 1100px; 并告诉我它是否已修复。
@SamiElk 是的，它奏效了！太感谢了。 :)
好的，我会添加答案

标签： css reactjs flexbox

【解决方案1】：

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

NavbarContainer 不会超过 1100 像素，因此不会填满整个标题。

这就是为什么徽标不在最左侧的原因，您将 NavbarContainer 与 justify-content:center 居中或将其设置为 flex-end。

【讨论】：