CSS导航栏元素对齐问题：横向排列及字体颜色修改求助

1. 实现Abstract和Help center横向排列 #

你的<ul>容器未启用弹性布局，内部<li>默认以块级元素垂直堆叠。只需给.menu ul添加弹性布局属性即可实现横向排列：

.menu ul {
    list-style: none;
    display: flex;
    gap: 24px; /* 控制两个导航项的间距，可按需调整 */
    align-items: center; /* 让导航项与右侧按钮垂直居中对齐 */
}

2. 修改导航链接字体颜色 #

<a>标签自带浏览器默认的蓝色样式，不会自动继承父元素的color属性，需单独设置链接颜色：

.menu ul li a {
    color: #fff; /* 设置为白色匹配预期效果 */
    text-decoration: none; /* 可选：移除默认下划线 */
}

修改后的完整CSS代码 #

*{
    padding: 0px;
    margin: 0px;
}

header{
    background-color: black;
    height: 100px;
}

.menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    color: #fff;
    align-items: center; /* 让左侧导航与右侧按钮整体垂直居中 */
}

.menu ul {
    list-style: none;
    display: flex;
    gap: 24px;
    align-items: center;
}

.menu ul li a {
    color: #fff;
    text-decoration: none;
}

额外给.menu添加align-items: center，能让左侧导航和右侧按钮在垂直方向上居中对齐，整体视觉更协调。

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