css - 如何停止按钮换行到输入组外的新行

Question

考虑以下代码：

<div class="col-xxs-12">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-location-arrow"></i></button>
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-search"></i></button>
        </div>
    </div>
            <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-reorder"></i></button>
</div>

这会产生一个表单输入，最后附有一个按钮组。然后呈现第三个单独的按钮：http ://bootply.com/79114

问题：阻止第三个按钮换行的最干净的方法是什么？我希望输入组（文本输入和两个按钮）按原样显示并占用剩余宽度的 100%，但要将第三个按钮放在同一行上。Float:right.

编辑为免生疑问，我希望第三个按钮单独设置样式，在input-group

Answer 1

将此添加到第三个按钮

<div style="display:table-cell;width:1%">   <button type="button" class="btn btn-default" tabindex="-1"><i class="icon-reorder"></i></button></div>

演示