如何让徽标左对齐和导航链接右对齐？答案

【问题标题】：How to Get Logo to Align Left and Nav Links to Align Right?如何让徽标左对齐和导航链接右对齐？
【发布时间】：2022-11-10 23:16:30
【问题描述】：

我正在尝试一切，我对此很陌生，只是无法让它发挥作用。我只是希望我的标志（“动画”）总是左对齐，链接右对齐。就像任何普通的导航栏一样。

动画标志工作得很好。我只是无法将徽标与链接分开并对齐？

我在动画徽标下尝试过float: right 和margin-right: auto。

.container {
  max-width: 1280px;
  margin: 0 right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  display: flex;
  color: #000000;
  transition-property: transform;
  transition-duration: .15s;
  font-size: 35px;
  font-weight: 600;
}

menu a {
  color: black;
  margin: 0 16px;
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s;
  padding: 8px 5px;
  border-radius: 99px;
  font-size: 20px;
}

.menu a:hover {
  color: #808080;
}

<nav>
  <div class="container">
    <a href="index.html" class="logo">
      <h3 class="animated-logo">
        <span class="letter first">t</span>
        <span class="letter">a</span>
        <span class="letter-hide">a</span>
        <span class="letter">r</span>
        <span class="letter">s</span>
        <span class="letter-hide">t</span>
        <span class="letter">r</span>
      </h3>
    </a>

    <div class="menu">
      <a href="about.html">About</a>
      <a href="experience.html">Experience</a>
      <a href="mailto:email">Contact Me</a>

    </div>
</nav>

【问题讨论】：

标签： html css

【解决方案1】：

将width: 100vw; 添加到.container。

你只设置max-width，这是不够的，因为如果没有足够的内容，宽度将是“自动”，但永远不会超过1280px。

如果内容不足，您希望宽度为100vw，但不要超过1280px。

请参阅下面的 sn-p。

.container {
  width: 100vw; /* Added */
  max-width: 1280px;
  margin: 0 right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  display: flex;
  color: #000000;
  transition-property: transform;
  transition-duration: .15s;
  font-size: 35px;
  font-weight: 600;
}

.menu a {
  color: black;
  margin: 0 16px;
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s;
  padding: 8px 5px;
  border-radius: 99px;
  font-size: 20px;
}

.menu a:hover {
  color: #808080;
}

<body>
  <nav>
    <div class="container">
      <a href="index.html" class="logo">
        <h3 class="animated-logo">
          <span class="letter first">t</span>
          <span class="letter">a</span>
          <span class="letter-hide">a</span>
          <span class="letter">r</span>
          <span class="letter">s</span>
          <span class="letter-hide">t</span>
          <span class="letter">r</span>
        </h3>
      </a>

      <div class="menu">
        <a href="about.html">About</a>
        <a href="experience.html">Experience</a>
        <a href="mailto:email">Contact Me</a>
      </div>
    </div>
  </nav>
</body>

编辑

.container {
  width: 100vw; /* Added */
  max-width: 1280px;
  margin: 0 right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  display: flex;
  color: #000000;
  transition-property: transform;
  transition-duration: .15s;
  font-size: 35px;
  font-weight: 600;
}

.menu a {
  color: black;
  margin: 0 16px;
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s;
  padding: 8px 5px;
  border-radius: 99px;
  font-size: 20px;
}

.menu a:hover {
  color: #808080;
}

/* Added */
nav {
  display: flex;
  justify-content: space-around;
}

<body>
  <nav>
    <div class="container">
      <a href="index.html" class="logo">
        <h3 class="animated-logo">
          <span class="letter first">t</span>
          <span class="letter">a</span>
          <span class="letter-hide">a</span>
          <span class="letter">r</span>
          <span class="letter">s</span>
          <span class="letter-hide">t</span>
          <span class="letter">r</span>
        </h3>
      </a>

      <div class="menu">
        <a href="about.html">About</a>
        <a href="experience.html">Experience</a>
        <a href="mailto:email">Contact Me</a>
      </div>
    </div>
  </nav>
</body>

【讨论】：

太感谢了！这把它搬过来了！说得通！一旦添加了这个空间 - i.vgy.me/Z5gp5h.png - 全屏时还有什么方法可以向左移动，或者这是否尽可能好？再次感谢你！
别客气。 :) 我编辑了我的答案。现在好点了吗？添加了nav { display: flex; justify-content: space-around; }。

【解决方案2】：

我通常用于导航栏的是 display: flex; 如果我理解正确你想要做的是在栏中水平组织元素，那么你可以为容器类提供以下属性：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}

如果这不符合您的需求，或者您想了解更多关于弹性盒子的信息，我推荐这个网站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 它解释了您需要了解的有关弹性盒的所有信息，并可以帮助您找到问题的解决方案。

【讨论】：