Question

我想创建一个右对齐的导航栏。每个链接项应包含一个图像和一个文本。只有文本时，此代码才能正常工作

#navbar {
  height: 60px;
  display: grid;
  justify-content: end;
  padding: 20px;
  background: red;
  align-items: center;
}

a {
  text-decoration: none;
  margin: 0 10px;
  color: white;
  background: black;
}

<div id="navbar">
  <div>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

现在，我将图像和文本添加到链接项，并围绕这些元素构建了包装器。

#navbar {
  height: 60px;
  display: grid;
  justify-items: end;
  padding: 20px;
  align-items: center;
  background: red;
}

#navbarLinkContainer {
  margin: 0 60px;
}

.navbarItemContainer {
  text-align: center;
  text-decoration: none;
  margin: 0 10px;
}

.navbarItemImg {
  width: 64px;
  height: 64px;
}

<div id="navbar">
  <div id="navbarLinkContainer">
    <a class="navbarItemContainer" href="/">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Home</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/about">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">About</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/projects">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Projects</div>
      </div>
    </a>
  </div>
</div>

不幸的是CSS现在坏了。我该如何解决这个问题，以使每个链接项都向右对齐，垂直居中并沿着导航栏放置？

我使用flexbox

实现了它

https://jsfiddle.net/q48tyuac/

，但是使用grid属性也许有更好的解决方案。因为当您减小屏幕尺寸时，这些元素是固定的，如果没有剩余空间，我希望它们分解到下一行。

Answer 1

使用flex-wrap:wrap;

#navbar {
  /* height: 60px; */
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  flex-wrap:wrap;
  align-items: center;
  background: red;
  /*  margin: 0 60px; */
}

https://jsfiddle.net/6p03s5cm/

Answer 2

如果您不想将flexbox与网格一起使用，则可以定位#navbarLinkContainer并使用列

#navbar {
      
      display: grid;
      justify-items: end;
      padding: 20px;
      align-items: center;
      background: red;
    }

    #navbarLinkContainer {
     
      display:grid;
      grid-template-columns:repeat(3 , 1fr) ;
      
    }

    .navbarItemContainer {
      text-align: center;
      text-decoration: none;
      margin: 0 10px;
    }

    .navbarItemImg {
      width: 64px;
      height: 64px;
    }

<div id="navbar">
  <div id="navbarLinkContainer">
    <a class="navbarItemContainer" href="/">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Home</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/about">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">About</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/projects">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Projects</div>
      </div>
    </a>
  </div>
</div>

沿导航栏右对齐包含图像和文本的链接项

2 个答案: