HTML/CSS导航栏内部元素无法右对齐 调整宽度效果不符合预期

问题核心原因 #

1. HTML结构不规范：<ul>的直接子元素只能是<li>，原有代码把<a>直接放在<ul>下不符合语义规则，也会导致样式解析异常
2. 布局逻辑冲突：同时混用flex、float、table三种布局规则，给<a>设置float:left直接抵消了nav容器的text-align:right效果，自然无法实现右对齐
3. 多余属性干扰：.inner_header重复声明display属性，固定链接宽度的写法适配性极差

修正后代码 #

HTML部分（先修正语义结构）

<div class="header">
  <div class="inner_header">
    <div class="logo_container">
      <img src=".png">
      <img src=".jpeg">
    </div>
    <p>Text <br> Text</p>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Data</a></li>
      <li><a href="#">Tool</a></li>
    </ul>
  </div>
</div>

CSS部分（统一用flex布局，清除冲突属性）

/* 先全局清零浏览器默认边距，避免样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.inner_header {
  width: 1000px;
  height: 80px; /* 可根据需求调整高度 */
  margin: 0 auto;
  background-color: #8ecae6;
  /*  flex布局实现左右两端对齐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav {
  height: 100%;
  width: 70%; /* 保留你原有70%宽度的设置，不需要可以删掉 */
  background-color: teal;
  list-style: none; /* 去掉ul默认的圆点标记 */
  /* flex布局实现子元素右对齐 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.nav li {
  height: 100%;
}
.nav a {
  height: 100%;
  background-color: red;
  /* 实现链接文字垂直居中 */
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: 'Montserrat';
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}
/* 最后一个链接右侧无内边距，文字和nav边缘完美对齐 */
.nav li:last-child a {
  padding-right: 0;
}

效果说明 #

修改后红色链接会自动靠向青绿色nav容器的右侧边缘，不需要固定链接宽度，适配不同文字长度的导航项也不会出现折行问题。

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