Question

我遇到了<button>个节点的问题，这些节点拒绝扩展其容器，同时填充容器。更新：此问题仅出现在Firefox 42中，而不是出现在Chrome 47中。

<!-- This one has a limited width -->
<div class="outer">
  <!-- This one is positioned absolutely and shall be extended -->
  <div class="container btn1" style="top: 0px">
    <!-- These shall extend the container and fill the whole width -->
    <button>Some lengthy label for the button</button>
    <button>Another label</button>
    <button>Still another label</button>
  </div>
</div>

可能这个例子最好地证明了这个问题： http://jsfiddle.net/5dh4j0hy/1/

我已经发现<button>是一个“替换元素”，这就是我遇到问题的原因：

我无法找到的是：我如何解决我的具体问题？正如小提示所示，width: 100%和width: auto没有达到预期的效果。由于边框或填充没有问题，box-sizing: border-box如果与此相关则不是。

Answer 1

在Firefox 42上测试（这似乎是目前唯一展示此问题的浏览器），我的建议是使用min-width而不是width。

因此，在您的示例中，更改此声明块应该起作用：

div.btn1 button { min-width: 100% }

这是一个updated JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

使<button>填充整个宽度，并（！）扩展其容器的大小

1 个答案: