如何防止div中的break中断？ （自举）

Question

我有以下HTML。而右边的文字（花絮）不断下降到下一行。这是铬。有没有办法在一条线上保持拉右div的内部？这是jsFiddle。

<div class="container" style="width:500px;>
    <div class="controls controls-row">
        <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <input class="input-mini" name="Amount" type="number" />
            <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            <div style="text-align:right; width:40px;">tidbit</div>
        </div>
    </div>
</diV>

Answer 1

您可以通过两次更正来完成此操作：

1. 在“tidbit”div中设置display: inline-block。
2. 将white-space: nowrap设置为pull-right容器。

<div class="container" style="width:500px;>
            <div class="controls controls-row">
            <span class="add-on">This can be quite long</span>
            <div class="pull-right">
                <input class="input-mini" name="Amount" type="number" />
                <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
                <div style="text-align:right; width:40px; display: inline-block;">tidbit</div>
            </div>
        </div>
</diV>

.pull-right{
    white-space:nowrap;
}

Example Fiddle

Answer 2

您可以在右拉父容器

内添加左拉和右拉

<div class="container" style="width:500px;">
    <div class="controls controls-row"> <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <div class="pull-left">
                <input class="input-mini" name="Amount" type="number" />
                <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            </div>
            <div class="pull-right" style="text-align:right; width:40px;">tidbit</div>
        </div>
    </div>
</diV>

Demo here

希望这有帮助

Answer 3

删除tidbit周围的div标签，如有必要，将一个小标签包裹在一个范围内 - JSfiddle

<div class="container" style="width:500px;>
    <div class="controls controls-row">
        <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <input class="input-mini" name="Amount" type="number" />
            <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            <span>tidbit</span><!--Move this the before or after the button-->
        </div>
    </div>
</diV>

Answer 4

div class pullright控件的组合宽度是多少？我认为它超过500px。

如果这些3的宽度超过500px，花絮文本将移动到下一行。所以控制宽度