Question

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

我有两个浮动元素（固定宽度，如果重要的话）包装div。右边的元素有固定的宽度，左边的元素应该占据剩余的宽度。

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

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

我不知道为什么我没想到只是将div中的按钮包裹起来。以下是我的想法：

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

这涉及overflow: hidden box formatting context trick（我怀疑它会在这里出现，但无法确定在哪里适合它）。亮点：

两个按钮用div buttonWrapper包装在div中。
这些div的格式是根据我在上面第三段中概述的技巧。右边的div有浮动：右边和固定宽度，左边的div没有特殊的样式。
我们现在应用框格式化上下文技巧。左边的div被赋予溢出：隐藏，这使得它为右浮动的div腾出空间。
我们现在可以向右侧div应用左边距，并更改其宽度，左侧div将始终是正确的尺寸。
div为我们创建了所需的“填充可用宽度”效果，现在我们只需将按钮放在div中并给它们高度和宽度100％。
如果是左侧按钮，您希望有一个固定的宽度，那么基本上重复上述步骤，左右交换。

Answer 1

这可能不完全是你在这里寻找的东西，但这里有一个选项，似乎已经为你提供了小提琴。

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

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

这是修改后的小提琴和修改后的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;
}

Answer 2

我调整了.right元素的背景不透明度，以查看它们下面发生了什么。看起来.left元素不仅占用了剩余空间 - 它们也占据了整行。奇怪的是，这些元素中的文本居中，好像它只占用了剩余的空间。

如果你想要同样的按钮工作，似乎唯一的解决方案涉及一点点黑客。按钮确实非常复杂。

button.left {
  margin: 0;
  position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
  z-index: -1; /*hides the "overflowing" part below the right button*/
  width: 100%; /*make the button stretch to the full width of the row*/
  padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
  padding-left: 0;
  display: block;

}

请参阅更新的小提琴：http://jsfiddle.net/wjFbD/6/

Answer 3

从

开始

一个元素具有固定宽度，另一个元素应该占用无论宽度如何。

这是我的一般解决方案：

let secretMessage = animals.map(function(animal) {
     return animal[0]
});

你可以将一个绿色的东西设置为固定的宽度，但实际上，你甚至不需要！事情很好。如果字符串变得太长，则会使用省略号截断字符串。

事情变得有点复杂，当其中一个是<div class="container"> <div class="two">125 €</div> <div class="one">my favorite provider</div> </div> (stylus syntax, in your mind just add {,},;) .one // red border none height auto overflow hidden white-space nowrap text-overflow ellipsis .two // green float left white-space nowrap text-overflow ellipsis而不是<button>时（我无法弄清楚，哪种风格属性会区分它们，所以我需要但是，无论如何，使用包装器，它也有效：

→参见full codepen here。（反馈意见。）

使按钮元素填充可用宽度

3 个答案: