使用justify-content:flex-end实现导航栏靠右布局不生效的问题咨询

你在nav上写的justify-content完全没效果，核心是你没满足这个属性生效的前提条件：

• innerheader是开启了flex布局的容器，默认所有子元素宽度都是随内容撑开的，不管是logo还是nav，都没有占满容器的剩余宽度。此时nav本身的宽度刚好包裹住内部的导航链接，自己内部没有多余可分配的空间，就算设了justify-content: flex-end，也没有多余空间可以把内容推到右侧，自然不生效。
• 你给nav设了margin: 0 auto，这个属性只有在元素有明确宽度的时候才会触发居中效果，现在nav宽度是内容自适应，这个外边距根本不会产生推到右侧的作用，反而打乱了flex的布局计算。
• ul上硬写的padding: 0 100px 0 240px完全是靠写死像素凑位置，根本没有靠弹性布局分配空间，进一步让调整失效。

• 把nav上原来的margin: 0 auto改成margin-left: auto。这是flex布局最常用的推位技巧：给flex项目设置单侧auto外边距，会把父容器内当前元素左侧的所有剩余空间都分配给这个外边距，直接把nav推到innerheader的最右侧，不需要写死nav的宽度。
• 删掉ul上硬编码的240px左padding、100px右padding，换成flex更灵活的间距控制：给ul设置display:flex后，用gap属性控制各个导航项之间的距离，再加少量和容器匹配的右侧内边距就行，不用靠写死像素凑位置。
• 因为nav已经被margin-left: auto推到容器最右侧，之前在nav上写的display:flex、justify-content: flex-end属于冗余代码，可以直接删掉，留着也没有作用。
• 顺手修正不符合HTML规范的结构：原来的代码里<ul>下面直接套<a>标签，把<li>放在a里面，这不符合HTML语法要求（ul的直接子元素必须是li），调整成li是ul的直接子元素、a嵌在li里面的结构，避免浏览器解析样式时出现异常。

调整后的CSS #

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  color: blanchedalmond;
}

.header {
  background-color: lightskyblue;
  width: 100%;
  height: 80px;
}

.innerheader {
  height: 100%;
  width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
}

.logo_nav h1 {
  font-weight: 200;
}

.logo_nav h1 span {
  font-weight: 900;
}

nav {
  /* 替换原来的margin:0 auto，直接把导航推到最右侧 */
  margin-left: auto;
}

ul {
  display: flex;
  align-items: center;
  /* 用gap控制导航项间距，替代原来硬写的padding */
  gap: 40px;
  padding-right: 40px;
}

ul a {
  font-size: 22px;
}

调整后的HTML #

<header class="header">
  <div class="innerheader">
    <div class="logo_nav">
      <h1>My <span>SITE</span></h1>
    </div>
    <nav class="nav">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Hire us</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

补充说明：如果之后需要让导航和容器右侧保持统一的边距，只要调整ul的右侧padding值即可，不需要靠写死大段内边距凑位置，后续做响应式调整也会更方便。

内容的提问来源于stack exchange，提问作者M.S