导航栏按钮无法靠右对齐，尝试float、justify-content属性均无效如何解决

问题根源 #

• 你给header button设置了position: absolute，绝对定位元素脱离正常文档流，float、父级flex的justify-content属性都不会生效，这类元素需要通过偏移属性（right/left/top/bottom）控制位置
• 你的header没有设置position: relative，绝对定位的子元素（logo、按钮）会默认相对于浏览器视口定位，页面滚动时可能出现位置偏移
• 绝对定位的元素不占据文档流空间，窗口宽度较小时，居中的导航文字很容易和两侧的logo、按钮重叠

解决方案 #

方案1：快速修复现有绝对定位写法 #

修改两处代码即可：

1. 给header样式添加position: relative;，作为子元素的定位父级
2. 给header button样式添加right: 10px;，让按钮靠右侧对齐

修改后对应代码片段：

header {
position: relative; /* 新增这行 */
display: flex;
height:80px;
width: 100%;
justify-content: center;
background-color:#0d1010;
align-items: center;
font-size: 1.3em;
border-bottom-left-radius: 10px ;
border-bottom-right-radius: 10px;
}

header button {
display: flex;
position: absolute;
background-color:#1e3f66;
color: mintcream;
border-radius: 20px;
padding: 10px;
width: 70px;
justify-content: center; /* 原有right改为center更合理，保证按钮文字居中 */
text-align: center;
right: 10px; /* 新增这行 */
}

方案2：更稳定的纯flex布局写法（推荐） #

移除所有子元素的绝对定位，靠flex布局实现左logo、中导航、右按钮的布局，避免元素重叠问题，修改后完整CSS如下：

*{
margin:0;
padding: 0;
box-sizing: border-box;
}

body {
    background-color: #a99272;
}

button {
cursor: pointer;
border:none;
}
header {
display: flex;
height:80px;
width: 100%;
justify-content: space-between; /* 子元素两端对齐 */
align-items: center;
padding: 0 10px; /* 左右内边距替代绝对定位的偏移值 */
background-color:#0d1010;
font-size: 1.3em;
border-bottom-left-radius: 10px ;
border-bottom-right-radius: 10px;
}

header img {
height: 60px;
}

header nav {
margin: 0 auto; /* 导航栏自动左右边距，实现居中 */
}

header nav ul {
list-style: none;
display: flex;
}

header button {
background-color:#1e3f66;
color: mintcream;
border-radius: 20px;
padding: 10px;
width: 70px;
text-align: center;
 }

 nav ul li {
 margin: 10px;
 color: #e8e8e9;
 }

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