一行有一个按钮和img重叠

Question

我正在尝试制作一个填充整个宽度并在右侧有一个图标的按钮。我们使用的按钮共享库不允许在元素中使用图标，因此我必须使用一些负边距 hacky 解决方案才能使其按预期工作。

我遇到的问题是我无法让 width: 100% 按钮与图标图像位于同一行。

.foo {
  background: yellow;
}

.one {
  background: pink;
  width: 100%;
  display: inline;
}

.two {
  display: inline;
  height: 20px;
  margin-left: -20px;
  background-color: green;
}

<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>

是否有某种方法可以使两者保持对齐，同时为按钮提供 100% 的宽度？

Answer 1

类似的东西？

.foo {
  background : yellow;
}

button {
  background : pink;
  width      : 100%;
  display    : inline;
  padding    : .3em;
}

button img {
  display          : inline;
  height           : 1.6em;
  float            : right;
  background-color : green;
}

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