Question

我无法解决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>

Answer 1

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

Answer 2

您缺少结束符div。

CSS菜单导航栏问题

2 个答案: