如何单独调整navbar导航栏中不同元素的对齐位置

现有代码问题 #

1. HTML结构不符合规范：<ul> 仅允许 <li> 作为直接子元素，你直接将logo的<a>标签放在<ul>下，会导致浏览器布局解析异常
2. CSS属性缺少单位：nav li 规则下的margin-right: 20、padding-top: 21均未添加px单位，浏览器不会生效
3. 布局逻辑错误：你给所有<li>设置了统一的左内边距，且整个nav设置为右浮动，天然无法实现部分元素左对齐、部分右对齐的需求

修正方案 #

推荐用flex布局实现需求，比原有的float布局更简单易维护，修改后的代码如下：

index.html 调整

<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hardcore Parkour</title>
</head>
<body>
    <header>
        <div class="navbar">
            <nav>
                <!-- 左侧导航组：logo + Home -->
                <div class="nav-left">
                    <a href=""><img src="HPLogo.png" alt="Hardcore Parkour" class="logo"></a>
                    <a href="">Home</a>
                </div>
                <!-- 右侧导航组：登录 + 注册 -->
                <div class="nav-right">
                    <a href="log_in.html">Log in</a>
                    <a href="sign_up.html">Sign up</a>
                </div>
            </nav>
        </div>
    </header>
</body>
</html>

style.css 调整

body{
    margin: 0;
    font-family: 'Bungee', cursive;
    color: #fff;
    background: slateblue;
}

header{
    background-color: #000;
}

.navbar{
    width: 95%;
    margin: 0 auto;
}

/* nav设置为flex布局，实现左右组两端对齐 */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 21px 0;
}

/* 左侧组内部横向排列，控制元素间距 */
.nav-left{
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo{
    width: 10%;
}

/* 右侧组内部横向排列，控制元素间距 */
.nav-right{
    display: flex;
    align-items: center;
    gap: 20px;
}

nav a{
    color: yellow;
    text-decoration: none;
}

修改后即可实现logo和Home左对齐，登录注册按钮右对齐的效果，后续如果要新增导航项，直接加在对应分组即可，无需调整布局代码。

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