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

Question

我正在使用div's as按钮转换为实际按钮,现在我需要让按钮填满容器的整个宽度.

码:

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

添加display:block到.button不工作(虽然我敢肯定,一定是在回答部分？),而且也没有left: 0; right: 0.width: 100%一些工作,但它忽略容器的填充属性,并使按钮太靠近容器的右侧.

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

Answer 1

将"box-sizing:border-box"属性添加到所有元素.宽度和高度属性包括填充和边框,但不包括边距.这将确保您跨元素的测量是正确的并考虑填充.显示:块和宽度: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 文档.

Answer 2

您可以使用CSS3 calc()。

如果您需要在旧版浏览器上使用此功能，请参阅此处的接受。

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

Answer 3

它不需要太复杂。首先将其煮沸至所需的状态，然后再添加填充等。对于您的按钮，只需执行此操作，它将延伸到整个宽度。

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

Answer 4

可能的答案：

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

答案 2：填充容器的 CSS 定位：宽度与左/右？

width: 100%

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