如何将导航栏中的无序列表内容向右对齐？

你的问题核心是flex布局下误用了float属性——float在flex容器里完全不起作用，所以你加的float: right根本没生效。这里有两种简单靠谱的方法可以实现导航列表向右对齐：

方法1：给header容器添加justify-content属性 #

利用flex布局的justify-content: space-between，让header里的两个子元素（网站标题和导航栏）分别对齐容器的左右两端。同时建议加上align-items: center，让元素垂直居中，视觉效果更协调：

修改你的styles.css中header的样式：

header {
 border: 2px dashed black;
 display: flex;
 padding: 10px;
 /* 新增：让左右元素分别对齐容器两端 */
 justify-content: space-between;
 /* 新增：让元素垂直居中 */
 align-items: center;
}

然后删掉.nav-list里的float: right，因为它在flex布局里完全没用：

.nav-list {
 list-style-type: none;
 display: flex;
 /* 删掉这行无效代码：float: right; */
}

方法2：给.nav-list添加margin-left: auto #

这种方法更灵活，适合header里有多个元素的场景。通过给导航列表设置margin-left: auto，让它自动占据剩余空间并靠右对齐：

修改.nav-list的样式：

.nav-list {
 list-style-type: none;
 display: flex;
 /* 删掉float: right; */
 /* 新增：自动靠左填充剩余空间，实现右对齐 */
 margin-left: auto;
}

同样建议给header加上align-items: center，避免标题和导航因高度不一致出现错位。

两种方法都能达到你想要的效果，选一个适合你场景的就行~

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