如何将div元素右对齐？汉堡菜单布局问题求助

问题概述 #

需要将汉堡菜单放置在页面右侧，与header保持同行且有预期间距。尝试多种布局方法均未达到效果，使用flex布局后出现汉堡菜单顶部线条比下方两条粗一倍的异常。

已尝试的无效操作 #

• 给#drop_menu设置margin-left:auto; margin-right:0px;，无效果
• 给#drop_menu添加float:right，菜单跳至下一行无法与header同行
• 给父容器#title_and_menu设position:relative，#drop_menu设right:200px，无法实现预期布局

解决方案 #

1. 修复汉堡线条粗细异常 #

HTML中重复使用同一ID不符合规范（ID必须唯一），这是导致线条渲染异常的核心原因。将汉堡线条的ID改为class：

修改后的HTML片段

<div id="drop_menu">
  <div class="hamburger_menu"></div>
  <div class="hamburger_menu"></div>
  <div class="hamburger_menu"></div>
</div>

对应CSS修改

.hamburger_menu {
  width: 35px;
  height: 1px;
  background-color: black;
  margin: 6px 0;
}

2. 实现右侧布局与间距控制 #

使用flex布局是最优方案，给父容器#title_and_menu添加width:100%确保占满整行，配合justify-content:space-between实现左右元素的自动间距：

父容器CSS样式

#title_and_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

可根据需求给#drop_menu添加右侧内边距，调整菜单与页面边缘的距离：

#drop_menu {
  padding-right: 25px;
}

最终完整代码 #

CSS

#title_and_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#drop_menu {
  padding-right: 25px;
}

.hamburger_menu {
  width: 35px;
  height: 1px;
  background-color: black;
  margin: 6px 0;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

#myHeader {
  background-color: white;
  color: black;
  padding: 25px;
}

#myHeader:hover {
  background-color: black;
  color: white;
}

body {
  padding: 25px;
}

HTML

<div id="title_and_menu">
  <div id="myHeader">
    <h1>9.</h1>
  </div>
  <div id="drop_menu">
    <div class="hamburger_menu"></div>
    <div class="hamburger_menu"></div>
    <div class="hamburger_menu"></div>
  </div>
</div>
<img src="home_image.jpg" alt="home image">

关键说明 #

• 替换重复ID为class：确保每个汉堡线条都正确应用样式，解决粗细不均问题
• Flex布局+宽度设置：让父容器占满整行，自动分配左右元素的间距，实现同行布局
• 修正原CSS拼写错误：将padding-botttom改为padding-bottom，避免样式失效

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