Html 如何防止带浮球的div破裂？（引导）

我有下面的HTML。右边的文本（tidbit）会一直下降到下一行。这是镀铬的。有没有一种方法可以将右div中的内容保持在一条直线上？这是你的电话号码

---

您可能可以在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">
            <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>


这可能相当长
添加
趣闻


希望这有帮助
您可以通过两个更正来完成此操作：

在“tidbit”div中设置
display:inlineblock
将
white space:nowrap
设置为
pull right
容器

移除tidbit周围的div标签，如有必要，将tidbit用span-

div类pullright控件的组合宽度是多少。我想它超过了500像素

若这3个字符的宽度超过500px，则tidbit文本将移动到下一行。所以控制宽度
好的，我应该更明确地回答我的问题。但是我需要宽度，否则随机的花絮会使对齐变得不正常。为什么文本垂直于底部对齐。有没有办法对准中心？这也行，但垂直对齐对我来说是个问题。@ArturoHernandez我不太明白你的意思，但也许你可以使用
边距
/
填充
…我发现
最小宽度
CSS属性在这方面很有用。
<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>

<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;
}

<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>