如何让100%宽度按钮与右侧图标同行？（共享按钮库场景）

因为按钮设置width:100%后默认是块级元素，会独占一行，加上共享库限制不能在按钮内嵌入图标，这里给你两种可行的解决方案：

方案1：绝对定位图标（推荐） #

通过父容器相对定位，让图标直接叠加在按钮右侧，既不影响按钮宽度，也能保证对齐：

.foo {
  background: yellow;
  position: relative; /* 图标将相对于这个容器定位 */
  padding: 0 10px; /* 可选，给整体加侧边留白 */
}

.one {
  background: pink;
  width: 100%;
  display: block;
  padding-right: 30px; /* 留出图标位置，防止按钮文字被遮挡 */
  box-sizing: border-box; /* 确保内边距不会撑开按钮宽度 */
}

.two {
  position: absolute;
  right: 15px; /* 和父容器的padding配合，调整图标位置 */
  top: 50%;
  transform: translateY(-50%); /* 让图标垂直居中对齐按钮 */
  height: 20px;
  background-color: green;
}

HTML保持原结构即可：

<div class="foo">
  <button class="one">
    This is a really cool button
  </button>
  <img class="two" src="https://cdn-icons-png.flaticon.com/512/5650/5650380.png">
</div>

方案2：Flex布局+负边距 #

利用flex让按钮占满剩余宽度，再用负边距把图标拉到按钮上方：

.foo {
  background: yellow;
  display: flex;
  align-items: center; /* 让按钮和图标垂直居中对齐 */
  padding: 0 10px;
}

.one {
  background: pink;
  flex: 1; /* 占满父容器的剩余宽度 */
  padding-right: 30px; /* 留出图标位置 */
  box-sizing: border-box;
}

.two {
  height: 20px;
  margin-left: -28px; /* 负边距拉到按钮上方，数值略小于按钮的padding-right */
  background-color: green;
}

关键注意点 #

• 必须给按钮加box-sizing: border-box，否则添加的右侧内边距会让按钮宽度超出父容器。
• 图标垂直居中可以通过transform: translateY(-50%)或者flex的align-items: center实现，根据方案选择即可。

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