html - 使按钮元素填充可用宽度

Question

这个网站上有很多“填充可用空间”的问题，但我的问题有点特殊，因为我已经得到了解决方案，但它不适用于按钮。我想了解为什么这对按钮不起作用，以及如何让它起作用。我想这只是我需要覆盖的按钮元素的一些浏览器样式。

我在一个(固定宽度，如果重要的话)包装 div 中有两个 float 元素。右边的元素有固定的宽度，左边的元素应该占据剩余的宽度。

我可以通过将右边的元素设置为固定宽度和 float: right 来实现这一点，并且让左边的元素没有任何特殊样式。这对 div 非常有效。它也适用于 span，但前提是我在它们上设置了 display: block。对于按钮，我根本无法让它工作。我尝试了 block、inline-block 以及我能在 MDN 上找到的所有晦涩的 width 值。

http://jsfiddle.net/wjFbD/2/

---

我不知道为什么我没有想到早先将按钮包装在 div 中。这是我想出的:

http://jsfiddle.net/SkczB/2/

这涉及溢出:隐藏 box formatting context trick (我怀疑它会出现在这里，但不太清楚该放在哪里)。亮点:

1. 这两个按钮用 buttonWrapper 类包裹在 div 中。
2. 这些 div 是根据我在上面第三段中概述的技巧格式化的。右边的 div 有 float: right 和固定的宽度，左边的 div 没有特殊的样式。
3. 我们现在应用框格式上下文技巧。左边的 div 被赋予 overflow: hidden，这导致它为右边 float 的 div 腾出空间。
4. 我们现在可以将左边距应用到右边的 div，并改变它的宽度，左边的 div 将始终是正确的大小。
5. div 为我们创建了所需的“填充可用宽度”效果，现在我们只需将按钮放在 div 中，并为它们设置 100% 的高度和宽度。
6. 如果您想要固定宽度的是左按钮，则基本上重复上述步骤，左右互换。

Answer 1

这可能不是您在这里要找的东西，但这里有一个选项似乎对我来说已经用您的 fiddle 解决了。

如果你有一个包含元素的固定宽度的 div，你可以在按钮 A 被设置为填充后拆分得到 div 的剩余宽度，比如说，100 像素，然后将按钮 2 设置为剩余尺寸。

或者，另一种选择是将其作为 20%/80%、30%/70% 之类的百分比运行。这是一个 fiddle ，可以在底部的按钮包装器上实现您正在寻找的东西。我已经为它应用了特定的类，并在每个按钮周围添加了 div 以进行更多控制。按钮包装 div 分别设置为 20% 和 80%，而按钮设置为填充 100% 的包含空间。

这是修改后的 fiddle 和修改后的 HTML/CSS。希望它对您正在寻找的内容有所帮助...

http://jsfiddle.net/wjFbD/7/

HTML

<div class="btnWrapper">
    <div class="buttonWrapperB">
    <button class="left">
        button Left
    </button>
    </div>
    <div class="buttonWrapperA">
    <button class="right">
        button Right
    </button>
    </div>
</div>​

CSS

.btnWrapper
{
    width: 100%;
    background-color: #FEE;
    border: 2px solid black;
    margin-bottom: 10px;
    height: 50px;
}

.buttonWrapperB{
    float: left;
    width: 20%;
}
.buttonWrapperB button{
    width: 100%;
    height: 50px;
}

.buttonWrapperA{
    float:left;
    width: 80%;            
}

.buttonWrapperA button{
    width: 100%;
    height: 50px;
}