如何将signup-login元素右对齐并与logo保持同一水平行？

要实现signup-login元素右对齐且与logo保持同一水平线，核心是给父容器.navbar设置Flex布局，以下是具体修改方案：

修改后的代码 #

CSS部分 #

body {
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #8c0424;
    display: flex; /* 启用Flex布局，控制子元素排列 */
    align-items: center; /* 垂直方向居中，确保logo和按钮在同一水平线 */
    justify-content: space-between; /* 子元素分别靠左右两侧 */
    padding: 0 20px; /* 避免元素贴边 */
    min-height: 60px; /* 给导航栏设置最小高度，提升视觉效果 */
}

.logo {
    width: 200px;
    padding: 0;
}

.signup-login {
    color: white; /* 可选：适配深色背景的文字颜色 */
    text-decoration: none; /* 可选：移除链接下划线 */
    padding: 8px 16px; /* 可选：扩大点击区域 */
}

HTML部分（无需修改） #

<body>
   <header>
    <nav class="navbar">
        <img class="logo" src="real-removebg-preview.png">
        <a class="signup-login" href="loginsignup.html">Sign up/Login</a>
    </nav>
   </header>
</body>

补充方案（更灵活的右对齐方式） #

如果后续导航栏需要添加中间元素，可改用margin-left: auto实现右对齐，无需依赖justify-content：

.navbar {
    background-color: #8c0424;
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-height: 60px;
}

.signup-login {
    margin-left: auto; /* 自动填充左侧空间，强制元素靠右 */
    color: white;
    text-decoration: none;
    padding: 8px 16px;
}

为什么之前的方法无效？ #

1. 错误地给单个链接元素.signup-login设置display:flex，Flex布局应该作用于父容器来控制子元素排列；
2. align-items: right是无效属性，align-items的有效值为flex-start/center/flex-end等，没有right；
3. 未给父容器设置布局规则，导致子元素无法按照预期对齐。

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