CSS菜单导航栏问题答案

【问题标题】：CSS menu navigation bar issueCSS菜单导航栏问题
【发布时间】：2020-09-04 06:21:51
【问题描述】：

我无法解决 CSS 问题。我正在处理页眉，想在一行中制作徽标、链接和社交图标。问题是当我添加社交图标时，它会落在第二行，但是当标题中只有徽标和链接时，一切看起来都很好。如何解决问题？

我的代码如下：

const HeaderLink = props => {
return (
<Link
  css={{
    fontSize: "0.9rem",
    fontWeight: 300,
    color: theme.colors.lightText,
    letterSpacing: 0.5,
  }}
  {...props}
>
</Link>
)
}


 <header
   css={{
    width: "100%",
    maxWidth: "100%",
    padding: "0 24px",
    position: "fixed",
    background: "#fff",
    boxShadow: "0 0 0.35rem rgba(0,0,0,.25)",
    zIndex: "100",
    top: 0,
  }}
 >
 <div
   css={{
      minHeight: "4.5rem",
      display: "grid",
      maxWidth: 1070,
      margin: "0 auto",
      gridTemplateColumns: "auto 1fr",
      alignItems: "center",

  }}
 >
 
 <Link to="/ ">
    <img style={{ height: "2.5rem" }} src={logo} alt="logo" />
 </Link>

 <div
    css={{
        display: "grid",
        gridAutoFlow: "column",
        gridAutoColumns: "max-content",
        gridGap: 24,
        justifyContent: "center",
        alignItems: "center",
    }}>
      <HeaderLink to="/about-us/">About Us</HeaderLink>
      <HeaderLink>Projects</HeaderLink>
      <HeaderLink>Bloh</HeaderLink>
      <HeaderLink>E-shop</HeaderLink>
      <HeaderLink>Contacts</HeaderLink>
 </div>
 <div
    css={{
        display: "grid",
        gridAutoFlow: "column",
        gridAutoColumns: "max-content",
        justifyContent: "end",
        alignItems: "center",
    }}
    >
    <a
       title="Facebook page"
       target="_blank"
       rel="noopener noreferrer"
       css={{
          marginRight: "0.5rem",
       }}
    >
      <FBIcon />
    </a>
    <a
       title="Pinterest page"
       target="_blank"
       rel="noopener noreferrer"
       css={{
          marginRight: "0.5rem",
       }}
    >
       <PinterestIcon />
    </a>
    <a
        title="Instagram feed"
        target="_blank"
        rel="noopener noreferrer"
        css={{
          marginRight: "0.5rem",

        }}
    >
        <InstagramIcon />
    </a>
 </div>

</header>

【问题讨论】：

你能用你的问题做一个codesandbox吗？
可能链接容器或社交链接容器之一是块元素

标签： css reactjs menu navigation

【解决方案1】：

请转到https://jsfiddle.net/ 并将您的 HTML 和 CSS 粘贴到那里。复制链接并将其粘贴到此处，以便人们更好地理解问题。您的问题主要是代码，并没有太大帮助。

【讨论】：

【解决方案2】：

您缺少结束 div 标记。

【讨论】：