Question

按钮元素不会使用左/右零技术拉伸到完整的父宽度。它完全适用于a代码，但不适用于button。我错过了什么？

问题是为什么左/右方法不适用于按钮。我知道我可以使用包装器，calc()或flexbox。但旧的方式不起作用似乎很奇怪。

#container {
  position: relative;
  width: 400px;
  height: 60px;
  padding: 0 20px;
  background: #ccc;
}

.button {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 20px;
  background: green;
  color: white;
  border: 1px solid #000;
}

a.button {
  top: 0;
}

button.button {
  top: 20px;
  display: block;
}

button.button-full {
  width: 100%;
  top: 40px;
}

<div id="container">
  <a class="button">Link button</a>
  <button class="button">Button button</button>
  <button class="button button-full">Button button</button>
</div>

Answer 1

您可以在width:inherit上设置button，但请注意，如果在容器上设置了box-sizing:border-box，它将无效，否则您可能需要width:calc(100% - paddings) ，在另一个答案中也提到过。

button {
  width: inherit;
}

Answer 2

您可以将按钮宽度添加到100％，这样它将是其父容器的100％。

 .button {
   position: absolute;
   left: 0;
   right: 0;
   **width: 100%;**

   background: green;
   color: white;
   border: 1px solid #000;
}

Answer 3

将width: calc();添加到.button，如

a.button {
  top: 0;
  width: calc();
}

这会将其拉伸至100％并保留父元素的填充。

Answer 4

您的按钮溢出了父级，因为您的按钮为absolute且已离开20px。

无需补偿父填充。

更改左left: 0px;或删除position: absolute;。

.button{
  position: absolute;
  left: 0px;
  ...
}

我宁愿删除position: absolute;

具有绝对位置的按钮不会拉伸到最大宽度

4 个答案: