如何让容器宽度适配最长文本，确保导航下拉菜单内容完全可见？

当前问题核心是：容器.container的宽度仅由触发按钮“EN ▾”的宽度决定，下拉菜单.dropdown设置了width:100%后会跟着容器变窄，无法完全展示更长的文本（比如“English”）。要让容器始终至少和最长文本等宽，按以下方式修改代码即可：

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  font-family: monospace;
}

.language {
  list-style: none;
  background: #22438C;
  display: block; /* 改为block，让按钮撑满容器宽度 */
  text-align: left; /* 文本左对齐，和下拉菜单排版统一 */
}

.container {
  display: inline-block;
  position: relative;
  min-width: max-content; /* 容器最小宽度匹配内部最长内容宽度 */
}

a {
  display: block;
  padding: 20px 25px;
  color: #FFF;
  text-decoration: none;
  font-size: 20px;
}

ul.dropdown li {
  display: block;
}

ul.dropdown {
  width: max-content; /* 下拉菜单自适应自身文本宽度 */
  background: #22438C;
  position: absolute;
  z-index: 999;
  display: none;
  left: 0; /* 确保下拉与容器左对齐 */
}

.dropdown a:hover {
  background: #112C66;
}

.container:hover ul.dropdown {
  display: block;
}

修改后的HTML代码（结构无需调整） #

<div class="container">
  <ul>
    <li>
      <a class="language" href="#">EN ▾</a>
      <ul class="dropdown">
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
  </ul>
</div>

关键改动说明 #

• 给.container加min-width: max-content：强制容器最小宽度等于内部最长文本的宽度，确保触发按钮和下拉菜单都能容纳最长内容。
• 移除.dropdown的width:100%，改用width: max-content：让下拉菜单根据自身文本长度自适应宽度，不再被容器宽度限制。
• 调整.language为display: block并设置text-align: left：让触发按钮撑满容器宽度，文本排版和下拉菜单保持一致，视觉更协调。

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