Html 我如何得到一个按钮和一个计数框内联的整个宽度的容器，无论宽度？

我在一行上有一个按钮和一个容器，当计数框在同一行上时，我试图将按钮设置为全宽（

btn block

）。现在的问题是，如果我给它一个固定的宽度，我可以在同一行上得到按钮，但是如果容器在其他分辨率上的宽度较小，或者如果按钮的计数为

4834

而不是

3

，则这不起作用

以下是我现在拥有的：

<div class="button-container">

 <div class="btn btn-primary">Boo</div>
 <div id="count_box" class="count_box">42</div>

</div>

请注意，

.button\u container

可以是600px宽或200px宽，等等，所以我不能给它一个固定的宽度。JSFIDLE比这里的代码更好地解释了这一点：

---

有没有简单的方法让按钮和计数都在同一行，并且按钮是100%（减去计数的宽度）？我迷路了。

您可以将计数部分设置为60px和剩余宽度的按钮

因此，您应该选择这个60px宽度，方法是假设其中的最大计数，然后按照您想要的方式对齐

HTML

<div class="button-container">

<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">42</div>

</div>

<div class="button-container-2">

<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">4255</div>

</div>

刚刚在你的标记中添加了一些css和类，我觉得这很好

---

fiddle:

您可以通过一些智能浮动操作来实现，这样所有宽度都是动态的，而静止按钮将填充剩余的宽度。注意，我在计数框中添加了class

pull right

，并将其移动到按钮之前

.button container.btn{
显示：块；
宽度：自动；
溢出：隐藏；
}
.计数箱{
位置：相对位置；
背景：#FFF；
边框：1px实心#333；
左边距：10px；
边界半径：3px；
填充：6px 10px；
顶部：1px；
颜色：#333；
}
.count\u box:之后，.count\u box:之前{
右：100%；
最高：50%；
边框：中等实心透明；
内容：“；
高度：0px；
宽度：0px；
位置：绝对位置；
指针事件：无；
}
.计数箱：之后{
边框颜色：rgba（255，255，255，0）#FFF rgba（255，255，255，0）rgba（255，255，255，0）；
边框宽度：8px；
利润上限：-8px；
}
.计数箱：在{
边框颜色：rgba（2212212210）#333 rgba（2212212210）rgba（2212212210）；
边框宽度：9px；
利润上限：-9px；
}
.按钮容器{
显示：内联块；
宽度：400px；
背景色：#FF0000；
填充：20px 0px；
}
.按钮-容器-2{
边缘顶部：20px；
显示：内联块；
宽度：200px；
背景色：#FF0000；
填充：20px 0px；
}

42
喝倒采
4333234
喝倒采

如果容器宽度不同，计数框也不同（如果有2或434），我看不出这是怎么回事？谢谢你的更新版本。我现在就试试！你说你不能给固定的宽度，因为这会使它们互相重叠，在这种情况下，这不会发生。

<div class="button-container">

<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">42</div>

</div>

<div class="button-container-2">

<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">4255</div>

</div>

.count_box {
    position: relative;
    background: #FFF;
    border: 1px solid #333;
    display: inline-block;
    margin-left: 10px;
    border-radius: 3px;
    padding: 6px 10px;
    top: 1px;
    color: #333;
    width: 60px;
}
.btn-block-almost{
 width: calc(100% - 80px);   
}