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

Question

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

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

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

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

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

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

这涉及到overflow: hidden 盒子格式化上下文技巧（我怀疑它会在这里出现，但不太清楚该放在哪里）。强调：

这两个按钮被包裹在带有类 buttonWrapper 的 div 中。
这些 div 是根据我在上面第三段中概述的技巧进行格式化的。右 div 具有 float: right 和固定宽度，左 div 没有特殊样式。
我们现在应用盒子格式化上下文技巧。左边的 div 被赋予溢出：隐藏，这会导致它为右边浮动的 div 腾出空间。
我们现在可以对右边的 div 应用左边距，并改变它的宽度，左边的 div 将永远是正确的大小。
div 为我们创建了所需的“填充可用宽度”效果，现在我们只需将按钮放在 div 内并给它们 100% 的高度和宽度。
如果它是您想要具有固定宽度的左按钮，则基本上重复上述步骤，左右交换。

score 2 · Accepted Answer

这可能不是您在这里寻找的东西，但这里有一个选项，似乎用您的小提琴为我解决了问题。

如果您有一个包含元素的固定宽度 div，您可以在按钮 A 设置为填充后拆分获取 div 的剩余宽度，例如 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;
}

</p>

score 0 · Accepted Answer

我调整了.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/

score 0 · Accepted Answer

从...开始

一个元素具有固定宽度，而另一个元素应占据剩余的任何宽度。

这是我的一般解决方案：

<div class="container">
    <div class="two">125&thinsp;€&lt;/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

您可以将一个绿色的东西设置为固定宽度，但实际上，您甚至不必这样做！事情很顺利。如果 String get 太长，它会用省略号截断。

<button>当其中一个是 a而不是 a时，事情会变得有点复杂<div>（我不知道哪个样式属性区分了它们，所以我需要样式化掉），但无论如何，使用包装器，这也可以：

→在此处查看完整的 codepen。（感谢反馈。）

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

3 回答 3

Related

Reference