如何基于父元素尺寸让下拉菜单三角居中指向触发按钮

当然可以用纯CSS实现，核心思路是利用容器的相对定位作为参考系，让三角的定位直接关联按钮的中心，不需要预先指定按钮宽度。

解决原理 #

• 让容器（.container）设置为position: relative，这样菜单和三角的绝对定位都会以容器为基准（容器宽度由按钮内容自动撑开）。
• 下拉三角通过left: 50% + transform: translateX(-50%)直接对准容器的水平中心，也就是按钮的中心，完全不依赖固定数值或CSS变量。
• 菜单的位置可通过调整left和transform控制，三角的定位逻辑不受影响。

完整实现代码 #

body {
  margin: 2rem 50%;
}

.container {
  position: relative; /* 作为菜单和三角的定位基准 */
  display: inline-block; /* 宽度由按钮内容自适应 */
}

.button {
  border: 1px solid black;
  padding: 0.5rem 1rem; /* 按钮内边距自适应内容 */
}

/* 辅助线：显示按钮中心，可删除 */
.button:after {
  display: block;
  position: absolute;
  content: "";
  width: 1px;
  height: 200%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: red;
}

.item {
  white-space: pre;
  padding: 1rem;
}

.item + .item {
  border-top: 1px solid black;
}

.menu {
  padding: 0;
  list-style: none;
  position: absolute;
  border-radius: 4px;
  border: 1px solid black;
  left: 100%; /* 菜单在按钮右侧 */
  top: 100%; /* 菜单在按钮下方 */
  transform: translateX(calc(-50% - 0.5rem)); /* 调整菜单位置，配合三角对准按钮中心 */
  margin-top: 0.5rem;
}

/* 下拉三角：直接基于容器定位 */
.menu:after,
.menu:before {
  content: "";
  position: absolute;
  left: 50%; /* 对准容器水平中心 */
  transform: translateX(-50%); /* 修正三角自身宽度的偏移 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: transparent;
}

.menu:before {
  border-bottom-color: black;
  top: -16px; /* 黑色边框三角在上 */
}

.menu:after {
  border-bottom-color: white;
  top: -15px; /* 白色背景三角在下，覆盖边框 */
}

<div class="container">
  <div class="button">自适应宽度按钮</div>
  <ul class="menu">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

<div class="container" style="margin-left: 2rem;">
  <div class="button">超长长长长长长长的自适应按钮</div>
  <ul class="menu">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

关键细节说明 #

• .container设置为position: relative后，内部绝对定位元素都会以它为参考，且容器宽度由按钮内容自动决定，完美适配各种按钮尺寸。
• 三角的left: 50%基于.container宽度，配合transform: translateX(-50%)精准对准按钮中心，无论按钮内容如何变化都不会偏移。
• 菜单的transform数值可根据需求调整，用来改变菜单的显示位置（比如按钮正下方、左侧等），三角定位逻辑无需改动。

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