如何实现下拉菜单（Dropdown）与图片在同一行显示？

问题分析 #

你当前代码里，图片和表单（下拉菜单容器）都是块级元素，默认会独占一行；同时用padding-left:1300px这种固定值定位菜单，既不兼容不同屏幕尺寸，还会导致布局错位。

修复方案 #

用Flexbox布局实现同行对齐，同时优化代码结构：

<body>
  <!-- 父容器用Flex实现同行布局 -->
  <div style="display: flex; align-items: center; gap: 20px; background-color: #ffffff; padding: 0 20px;">
    <img src="Kharabora Coding-1 (1).png" height="150px" class="img">
    <!-- 菜单容器，用Flex排列下拉按钮 -->
    <div style="display: flex; margin-left: auto; gap: 75px;">
      <div class="dropdown">
        <button class="dropbtn"><a href="#" class="a-a">LATEST WORK</a></button>
        <div class="dropdown-content"></div>
      </div>
      <div class="dropdown3">
        <button class="dropbtn3"><a href="#" class="a-2">WHAT WE DO</a></button>
        <div class="dropdown-content3"></div>
      </div>
      <div class="dropdown2">
        <button class="dropbtn2"><a href="#" class="a-1">ABOUT</a></button>
        <div class="dropdown-content2"></div>
      </div>
    </div>
  </div>
</body>

关键改动说明 #

• 给图片和菜单套一个父容器，设置display: flex让子元素同行排列，align-items: center保证垂直居中
• 菜单部分用嵌套Flex布局，margin-left: auto让菜单靠右对齐，gap替代padding-left设置按钮间距，适配性更强
• 移除原代码中多余的</div>闭合标签，修复结构错误
• 去掉不必要的表单标签（若无需表单提交功能，表单包裹菜单无意义）

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