如何让拆分按钮下拉列表在按钮上下两侧显示

修改后完整代码 #

HTML

<div class="dropdown" style="width: 15px; position: relative;">
   <button class="btn1 trailSlArrowButton" style="border-left:1px solid #0d8bf2; height: 27px; position: relative; z-index: 2;">
         <i class="fa fa-caret-down arrowIcon"></i>
   </button>
   <div class="dropdown-content">
     <a value="10">10%</a>
     <a value="15">15%</a>
     <a value="20">20%</a>
     <a value="25">25%</a>
     <a value="50">50%</a>
     <a value="70">70%</a>
     <a value="80">80%</a>
     <a value="100">100%</a>
     <a value="200">200%</a>
   </div>
</div>

CSS

.trailSlArrowButton {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 60px;
  z-index: 1;
  padding: 3px;
  /* 垂直水平居中下拉框，使按钮位于列表中央 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropdown-content a {
  color: black;
  padding: 1px 2px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #2196F3;
  border-radius: 12px;
  transform: scale(1.3);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover {
  background-color: #0b7dda;
}

核心调整说明 #

1. 父容器定位基准：给.dropdown添加position: relative，让下拉框的绝对定位以该容器为参照，避免脱离布局流。
2. 下拉框居中布局：通过top: 50%、left: 50%结合transform: translate(-50%, -50%)，实现下拉框相对于按钮的垂直水平居中，自然让按钮处于列表中央位置。
3. 层级控制（可选）：按钮上的z-index: 2确保按钮始终显示在下拉列表上方；如果允许按钮被列表覆盖，直接移除该属性即可。
4. 视觉优化：给下拉选项添加text-align: center，让选项文本居中对齐，提升整体视觉协调性。

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