如何使用CSS将HTML页面中的导航项移动到屏幕右侧？

你当前已经给头部容器设置了display: flex，不需要用复杂的绝对定位，只需要几行CSS调整就能实现导航靠右的效果，稳定性远高于硬定位写法。

存在的基础问题 #

• 现有代码把页面可见的头部内容写在了<head>标签内，不符合HTML规范，可见内容需要放在<body>标签中
• 导航外层容器没有设置自动填充剩余空间的属性，所以默认跟在logo后面排列
• CSS存在冗余选择器，部分元素默认样式没有清除，布局会有默认边距干扰

修改后的完整代码 #

CSS部分 #

.header {
  background-color: gray;
  display: flex;
  align-items: center; /* 实现logo和导航垂直居中对齐 */
  border: solid 2px black;
  max-height: 100px;
}

/* 核心样式：将导航容器推到最右侧 */
.ul {
  margin-left: auto;
}

.logo img {
  border: solid 2px black;
  max-height: 100%;
}

.nav_list {
  display: flex;
  gap: 24px; /* 控制三个导航项之间的间距 */
  border: solid 2px black;
  text-decoration: none;
  margin: 0; /* 清除ul默认的上下外边距 */
  padding: 12px;
}

.nav_list li {
  border: solid 2px black;
  list-style-type: none;
}

HTML部分 #

<head>
  <!-- 此处放meta、title、样式引入等非可见头部信息 -->
</head>
<body>
  <div class="header">
    <div class="logo">
      <img src="https://static.vecteezy.com/system/resources/thumbnails/004/753/002/small/custom-coding-icon-shadowed-detailed-custom-coding-logo-free-vector.jpg">
    </div>
    <div class="ul"> 
      <ul class="nav_list">
        <li>Home</li>
        <li>About</li>
        <li>Projects</li>
      </ul>
   </div>
  </div>
</body>

实现原理 #

• Flex布局下，给子元素设置margin-left: auto，会让该元素的左外边距自动占满父容器内的剩余空白空间，直接把元素推到容器最右侧，不需要手动计算宽度、边距数值，适配性极强。
• 做这类常规的线性布局优先使用Flex/Grid，不要上来就用position: absolute这类脱离文档流的定位属性，后者很容易出现元素重叠、多尺寸下错位的问题，也是新手觉得定位难的核心原因。
• 如果后续需要在logo和导航之间加其他元素，也可以直接给.header加justify-content: space-between实现两端对齐，效果和当前写法一致。

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