使按钮元素填充可用宽度

Question

这个网站上有很多"填充可用空间"的问题,但是我的问题有点特别,因为我已经有了一个解决方案,但它对按钮不起作用.我想了解为什么这对按钮不起作用,以及我如何使其工作.我想这只是我需要覆盖的按钮元素的一些浏览器风格.

我有两个浮动元素(固定宽度,如果重要)包装div.右边的元素有固定的宽度,左边的元素应占用剩余的宽度.

我可以通过将正确的元素设置为具有固定的宽度来实现这一点float: right,并且使左元素没有任何特殊样式.这适用于div.它也适用于跨度,但只有我设置display: block它们.对于按钮,我根本无法使用它.我尝试了块,内联块以及width我在MDN上可以找到的每个模糊值.

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

---

我不知道为什么我没想到只是将div中的按钮包裹起来.这是我想出的:

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

这涉及到overflow: hidden 盒子格式化上下文技巧(我怀疑它会在这里出现,但是看不到它适合它的位置).强调:

1. 这两个按钮用div按钮包装在div中.
2. 这些div按照我在上面第三段中概述的技巧进行格式化.右边的div有浮动:右边和固定宽度,左边的div没有特殊的样式.
3. 我们现在应用框格式化上下文技巧.左边的div被赋予溢出:隐藏,这使得它为右浮动的div腾出空间.
4. 我们现在可以向右侧div应用左边距,并更改其宽度,左侧div将始终为正确的大小.
5. div为我们创建了所需的"填充可用宽度"效果,现在我们只需将按钮放在div中并给它们100%的高度和宽度.
6. 如果它是左键你想要有一个固定的宽度,那么基本上重复上面的步骤,左右交换.

Answer 1

这可能不完全是您在这里寻找的，但这里有一个选项，似乎已经通过您的小提琴为我解决了。

\n\n

如果您有一个包含元素的固定宽度 div，则可以在按钮 A 设置为填充（例如 100 像素）后拆分获取 div 的剩余宽度，然后将按钮 2 设置为剩余宽度尺寸。

\n\n

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

\n\n

这是修改后的小提琴和修改后的 HTML/CSS。希望它对您正在寻找的东西有所帮助...

\n\n

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

\n\n

超文本标记语言

\n\n

<div class="btnWrapper">\n    <div class="buttonWrapperB">\n    <button class="left">\n        button Left\n    </button>\n    </div>\n    <div class="buttonWrapperA">\n    <button class="right">\n        button Right\n    </button>\n    </div>\n</div>\xe2\x80\x8b\n

\n\n

CSS

\n\n

.btnWrapper\n{\n    width: 100%;\n    background-color: #FEE;\n    border: 2px solid black;\n    margin-bottom: 10px;\n    height: 50px;\n}\n\n.buttonWrapperB{\n    float: left;\n    width: 20%;\n}\n.buttonWrapperB button{\n    width: 100%;\n    height: 50px;\n}\n\n.buttonWrapperA{\n    float:left;\n    width: 80%;            \n}\n\n.buttonWrapperA button{\n    width: 100%;\n    height: 50px;\n}\n

\n\n

\xe2\x80\x8b

\n