让按钮填满容器元素的整个宽度？

Question

我正在从使用 div 元素作为按钮转换到使用实际的按钮，现在我需要让这些按钮填满容器的整个宽度。

Code:

.container {
  background-color: #ddd;
  padding: 10px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px
}

<div class="container">

  <div class="button">
    Fills the full width
  </div>

  <button class="button">
    Does not fill the full width
  </button>

</div>

将.button添加display:block并不起作用（虽然我敢肯定这一点是答案的一部分？），left:0; right:0也是如此。width:100%有点效果，但它会忽略容器的填充属性，并使按钮过于靠近容器的右侧。

这是 JSFiddle：http://jsfiddle.net/mn40mz2n/

- Alesh Houdek

Answer 1

将"box-sizing: border-box"属性添加到所有元素中。宽度和高度属性包括填充和边框，但不包括边距。这将确保您在元素之间的测量值是正确的，并考虑了填充。display:block和width:100% 是铺满整个宽度的正确方式，但您需要删除按钮上的左/右边距，因为它将其推出包含元素。

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

了解有关box-sizing属性的更多信息，请阅读MDN 文档。

- Joshua Kelly

---

这个方法解决了我在Anki上长期遭受不同卡组问题的困扰。 - Rusca8

Answer 2

不需要太复杂。首先将其简化为您想要完成的任务，然后再添加填充等内容。对于按钮，只需这样做，它就会延伸到整个宽度。

.button {
    width:100%;
    display:block;
}

- nomistic

Answer 3

可能的答案：

答案1：为什么display:block不能拉伸按钮或输入元素

答案2：CSS定位填充容器：宽度 vs. 左/右

width: 100%

按钮正常工作。按钮向右移动是因为按钮中的left-margin。

- Barun

Answer 4

您可以使用 CSS3 的 calc() 方法。

如果您需要此功能在旧版浏览器上运行，请查看这里的支持情况 here。

.container {
  background-color: #ddd;
  padding: 10px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px
}

button.button {
  width: calc(100% - 20px);
}

<div class="container">

  <div class="button">
    Fills the full width
  </div>

  <button class="button">
    Does not fill the full width
  </button>

</div>

- Dinei

---

这对我来说是全新的，非常棒。我相当确定 box-sizing: border-box 更符合我的想法，但也许这是更好的选择？无疑，不支持的浏览器不是一个问题。 - Alesh Houdek

是的，CSS3的calc()很棒。我想改变你原来标记的最小值，但值得一提的是，我会尝试使用@JoshuaKelly的方法，因为它更简单，“越简单越好”。 - Dinei