如何使两个内联按钮中的一个填充剩余的可用空间？

Question

我有两个内联按钮，左按钮有20px填充，另一个需要20px的填充，但也需要占用剩余空间。两者之间的差距都是10px。

我已经尝试过浮动和桌面细胞，但无法达到我想要的效果。浏览器支持不是问题。如果可能的话，我想避免使用JS。

请参阅下图以获得直观说明。

提前致谢

Answer 1

.btnset {
  display: flex; // added
}
.btn {
  border-radius: 5px;
  border: 2px solid grey;
  padding: 20px;
}
.btn + .btn {
  margin-left: 10px; // added space between the two buttons
}
.btn2 {
  width: 100%; // so that the div takes available width
}

<div class="btnset">
  <button class="btn btn1">Button</button>
  <button class="btn btn2">button</button>
</div>

Answer 2

弹性框的神奇之处，让我们试试这个片段：

.wrapper-btns {
  display: flex;
}

.wrapper-btns .btn-back, .wrapper-btns .btn-next {
  padding: 20px;
}

.wrapper-btns .btn-back {
  width: 30%;
  margin-right: 5px;
}

.wrapper-btns .btn-next {
  width: 100%;
}

<div class="wrapper-btns">
  <button class="btn-back">Back</button>
  <button class="btn-next">Next</button>
</div>

  

Flex盒子可以让你拥有css多年来所拥有的控制权。   More info..

Answer 3

首先使用box-sizing：border-box。它将其填充计为其总宽度。另一个与问题相关的建议是在要填充剩余大小的按钮上使用min-width属性。