制作一个按钮填充容器元素的整个宽度？

Question

我将使用div作为按钮转换为实际按钮，现在我需要使按钮填充容器的整个宽度。

代码：

＆＃13;

＆＃13;

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

＆＃13;

<div class="container">

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

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

</div>

＆＃13;

＆＃13;

＆＃13;

将display:block添加到.button不起作用（虽然我确定必须参与答案吗？），left: 0; right: 0也不行。 width: 100%类似的工作，但它忽略了容器的填充属性，并使按钮太靠近容器的右侧。

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

Answer 1

添加＆＃34;框大小调整：border-box＆＃34;所有元素的属性。宽度和高度属性包括填充和边框，但不包括边距。这将确保您跨元素的测量是正确的并考虑填充。显示：块和宽度：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 docs。

Answer 2

它不需要太复杂。将其简化为您希望它首先执行的操作，然后再添加填充等。对于你的按钮，只需这样做，它将伸展到整个宽度。

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

Answer 3

可能的答案：

Answer 1: Why does display:block not stretch buttons or input elements

Answer 2: CSS positioning to fill container: width vs. left/right?

width: 100%

工作正常。由于按钮中的left-margin，按钮向右移动。

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>