如何实现Logo左对齐、导航链接右对齐？

问题分析 #

你的代码里有几个关键问题导致布局失效：

• .container的margin: 0 right;是无效写法，正确的水平居中应该用margin: 0 auto;，同时需要让nav占满整个宽度，这样container的justify-content: space-between才能生效
• CSS选择器错误：menu a应该是.menu a（class选择器需要加.）
• 无需给.animated-logo添加float属性，flex布局已经能实现你要的对齐效果

修正后的代码 #

CSS部分

.container {
  max-width: 1280px;
  margin: 0 auto; /* 修正margin写法，实现水平居中 */
  width: 100%; /* 让容器占满nav的可用宽度 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* 自动把子元素分别推向左右两端 */
}

nav {
  display: flex;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 16px 32px;
  width: 100%; /* 让nav占满整个视口宽度 */
}

a {
  text-decoration: none;
}

.logo {
  display: inline-flex;
}

.animated-logo {
  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;
}

HTML部分

<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> <!-- 补上缺失的container闭合标签 -->
</nav>

关键调整说明 #

• 给nav和.container添加width: 100%，确保容器能撑满整个导航栏宽度，让justify-content: space-between可以将Logo和菜单分别推到左右两端
• 修正margin的错误写法，让容器在导航栏内水平居中
• 修复CSS选择器的拼写错误，确保菜单样式能正确应用
• 移除.animated-logo上多余的float属性，避免干扰flex布局

内容的提问来源于stack exchange，提问作者pdev