Bootstrap折叠面板图标无法精准定位至文本框右上方求助

要实现图标精准定位到文本框右上方，你需要调整布局结构和定位方式，以下是具体修改：

1. 调整HTML结构 #

将文本框和图标区域包裹在一个父容器内，为精准定位提供基准：

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
  <div class="input-wrapper">
    <input type="textbox" value="Accordion Item #1"/>
    <div class="wactions">
      <span class="wcopy material-symbols-outlined text-primary">content_copy</span>&nbsp;&nbsp;
      <span class="wdelete material-symbols-outlined text-primary">delete</span>
    </div>
  </div>
  <br><Span>Desc goes here</span><br><Span>Desc goes here</span>
</button>

2. 修改CSS样式 #

移除不合理的inline布局，改用相对+绝对定位实现精准对齐：

.accordion {
  margin: 30px;
}

.accordion-button.collapsed {
  border-bottom: #ccc 1px solid
}

.accordion-body {
  border-left: #673ab744 1px solid;
  border-bottom: #673ab744 1px solid;
  border-right: #673ab744 1px solid
}

/* 移除inline布局，让按钮正常承载内部元素 */
.accordion-button{
    display: block!important;
}

/* 作为图标的定位父容器 */
.input-wrapper {
    position: relative;
    width: fit-content; /* 容器宽度适配文本框 */
}

/* 绝对定位到文本框右上方 */
.wactions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%); /* 垂直居中对齐文本框 */
    margin-right: 8px; /* 调整和文本框的间距 */
}

/* 给文本框添加右侧内边距，避免文本和图标重叠 */
.input-wrapper input {
    padding-right: 80px;
}

原理说明 #

• 用position:relative给图标设置定位基准，确保图标相对于文本框容器定位，而非整个按钮
• position:absolute配合top和right属性，直接将图标固定在容器右上角
• 移除float:right，因为float基于文本流布局，无法精准控制相对于单个元素的位置
• 给文本框添加右侧内边距，防止输入文本和图标重叠

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