如何将导航菜单置于容器右侧（订单按钮前）？

问题核心在于你的.container使用了justify-content: space-between，这会让logo、导航栏、订单按钮三个子元素分别占据容器左、中、右位置。要实现导航栏在订单按钮左侧且整体位于容器右侧，只需调整HTML结构并优化flex布局即可。

步骤1：修改HTML结构 #

把导航栏和订单按钮包裹在同一个容器（如.right-group）中，让它们成为一个整体flex项：

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>quick Pizza</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<header>
    <div class="container">
        <div class="logo">QUICK<span>Pizza</span></div>
        <!-- 新增容器包裹导航栏和按钮 -->
        <div class="right-group">
            <div class="nav">
                <a href="Home">Home</a>
                <a href="Home">Menü</a>
                <a href="Home">Kontakt</a>
            </div>    
            <button class="order">Jetzt bestellen</button>
        </div>
    </div>
</header>
<body>
    
</body>
<footer></footer>

步骤2：调整CSS样式 #

修改.container的布局逻辑，给新容器添加flex属性：

*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

header {
    height: 90px;
    background-color: #262626;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo  {
    text-decoration: none;
    color: white;
    font-size: 27px;
    font-weight: 600;
    text-transform: uppercase;
}

.logo span {
    color: orange;
}

.container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 现在容器只有两个子元素：logo和right-group，实现左右分布 */
}

/* 右侧容器样式 */
.right-group {
    display: flex;
    align-items: center;
    gap: 25px; /* 控制导航栏和按钮的间距 */
}

.nav {
    display: flex;
    align-items: center;
}

.nav a {
    text-decoration: none;
    font-size: 25px;
    color: white;
    text-align: center;
    padding: 19px;
}

/* 给按钮添加基础样式（可选） */
.order {
    padding: 12px 24px;
    background-color: orange;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

关键说明 #

• 通过.right-group将导航栏和按钮整合为一个flex项，让.container的justify-content: space-between实现logo左对齐、右侧整体右对齐。
• .right-group内部用flex布局，保证导航栏和按钮横向排列，gap属性控制两者间距，提升视觉协调性。
• 移除header中的justify-content: space-between，避免与.container的布局逻辑冲突。

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