如何让Flexbox导航栏中单个元素居右其余元素居左？

DevOps 小满

2026-7-4

实现导航栏左右分栏的方案

按照你说的把Login/Signup从无序列表中移出的思路，具体操作如下：

1. 修改HTML结构

把登录注册项从<ul>中提取出来，作为<nav>的直接子元素，结构如下：

<nav id="navbar">
    <div id="logo">
        <img src="logo.png" alt="www.lunchbox.com">
    </div>
    <ul>
        <li class="item"><a href="#home">Home</a></li>
        <li class="item"><a href="#services-container">Services</a></li>
        <li class="item"><a href="#contact">Contact Us</a></li>
    </ul>
    <!-- 单独提取的登录注册链接 -->
    <div class="auth-item">
        <a href="loginsignup.html">Login/ Signup</a>
    </div>
</nav>

2. 调整CSS样式

通过给<nav>设置Flex布局，实现左右分栏，并保证新提取的链接样式和其他项统一：

/* 让导航栏成为Flex容器，控制内部元素对齐 */
#navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333; /* 示例背景色，可根据需求修改 */
    padding: 0 1rem;
}

#logo img {
    height: 50px; /* 调整logo大小，避免撑高导航栏 */
}

#navbar ul{
    display: flex;
    font-family: 'Baloo Bhai', cursive;
    margin: 0;
    padding: 0;
}

#navbar ul li{ 
    list-style: none;
    font-size: 1.3rem;
}

#navbar ul li a{
    color: white;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}

#navbar ul li a:hover{
    color: black;
    background-color: white;
}

/* 给登录注册链接设置和其他项一致的样式 */
.auth-item a {
    color: white;
    font-family: 'Baloo Bhai', cursive;
    font-size: 1.3rem;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}

.auth-item a:hover {
    color: black;
    background-color: white;
}