如何通过CSS调整含图文的Dropdown Menu尺寸并实现上下布局？

问题分析 #

1. 菜单区域过大：原代码下拉菜单固定了min-width，且图片未做尺寸限制，加上hover时菜单选项被设置为横向排列，共同导致容器宽度异常。
2. 文字图片布局：原链接内文字与图片默认横向排列，需要调整为纵向上下布局。

修改后的代码 #

HTML（保持原有结构即可）

<div class="wrap">
  <div class="header">
    <img src="./images.png" class="image" alt="logo" />
    <div class="dropdown">
      <button class="dropbtn">Menu</button>
      <div class="dropdown-content">
        <a href="#">Roofs<img src="https://insta-galery.w3spaces.com/strecha.jpg"/></a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

CSS（关键修改点已标注）

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  margin-top: 1px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.image{
  display: flex;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  /* 去掉固定min-width，让宽度随内容自适应 */
  /* min-width: 100px; */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  /* 让菜单选项垂直排列 */
  flex-direction: column;
}

.dropdown-content a {
  color: black;
  /* 调整padding，减少多余空白 */
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  /* 实现文字在上、图片在下的纵向布局 */
  flex-direction: column;
  align-items: center;
  gap: 4px; /* 控制文字与图片的间距 */
  border-radius: 10px;
}

/* 限制图片尺寸，避免撑大容器 */
.dropdown-content a img {
  max-width: 80px;
  height: auto;
}

.dropdown-content a:hover {background-color: #ddd;}

/* 保持flex布局但用column方向，替代原横向排列 */
.dropdown:hover .dropdown-content {display: flex;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

修改说明 #

1. 菜单垂直排列：给.dropdown-content添加flex-direction: column，hover时保持flex布局但让选项纵向排列，解决横向布局导致的宽度异常。
2. 文字图片纵向布局：给.dropdown-content a设置flex纵向布局，通过align-items: center让内容居中，gap控制文字与图片的间距。
3. 解决容器过大：移除固定min-width，让菜单宽度由内容撑开；给图片设置max-width限制尺寸；调整链接的padding，减少不必要的空白区域。

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