响应式导航栏移动端logo与汉堡菜单位置颠倒求助

问题描述 #

我是编程新手，正在开发首个项目——带有导航栏和汉堡菜单的响应式网站。预期移动端模式下隐藏li/a元素、显示汉堡菜单，但当前出现问题：原本居左的logo在移动端变为居右，汉堡菜单却居左。

原始代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
    <nav class="nav">
        <label for="hamburger" id="hambox">&#9776;</label>
        <input type="checkbox" id="hamburger">
        <img id="logo_small" src="/Bilder/Logo_small.png" alt="">
        <div id="hamitems">
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li> 
            </ul>
        </div>
    </nav>
</body>
</html>

CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  padding: 0;
}
.nav label,
#hamburger {
  display: none;
}
.nav {
  background-color: #3d3f45;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  display: flex;
  margin-right: 20px;
  margin-left: auto;
}
.nav ul li {
  margin-left: 20px;
  color: #fff;
}

#logo_small {
  max-height: 60px;
  margin-left: 20px;
}

.nav a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
.nav a:hover {
  color: brown;
}
@media screen and (max-width: 768px) {
  
  #hamitems {
    display: none;
  }
  #hamitems li {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #nav label {
    display: inline-block;
    color: #fff;
    background: green;
    font-size: 1.2em;
    font-style: normal;
    padding: 10px;
  }
  #hambox {
    display: block;
  }
}

修正方案 #

修改后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
    <nav class="nav">
        <!-- 将logo移到汉堡菜单label之前，保证布局顺序正确 -->
        <img id="logo_small" src="/Bilder/Logo_small.png" alt="网站Logo">
        <label for="hamburger" id="hambox">&#9776;</label>
        <input type="checkbox" id="hamburger">
        <div id="hamitems">
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li> 
            </ul>
        </div>
    </nav>
</body>
</html>

修改后的CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  padding: 0;
}
.nav label,
#hamburger {
  display: none;
}
.nav {
  background-color: #3d3f45;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  display: flex;
  margin-right: 20px;
  margin-left: auto;
}
.nav ul li {
  margin-left: 20px;
  color: #fff;
}

#logo_small {
  max-height: 60px;
  margin-left: 20px;
}

.nav a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
.nav a:hover {
  color: brown;
}
@media screen and (max-width: 768px) {
  
  #hamitems {
    display: none;
  }
  /* 修正选择器错误：将#nav label改为.nav label，匹配导航栏的class */
  .nav label {
    display: inline-block;
    color: #fff;
    background: green;
    font-size: 1.2em;
    font-style: normal;
    padding: 10px;
    margin-right: 20px; /* 给汉堡菜单添加右侧间距，保持布局一致 */
  }
  /* 移除冗余代码：#hambox的display:block无需单独设置，因为label已设置显示 */
}

修正说明 #

1. 调整DOM元素顺序：Flex布局会按照元素在HTML中的顺序排列，将logo移到汉堡菜单label之前，配合.nav的justify-content: space-between属性，能保证logo始终居左，汉堡菜单居右。
2. 修复选择器错误：原代码中#nav label是无效选择器（导航栏使用的是class而非id），改为.nav label后才能正确应用移动端汉堡菜单的样式。
3. 移除冗余代码：#hambox是label的id，无需单独设置display:block，因为其父元素label已经被设置为display:inline-block，会自动显示。

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