5

我有以下 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>
4

4 回答 4

7

您可以通过两个更正来做到这一点：

  1. display: inline-block在“花絮” div 中设置。
  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;
}

示例小提琴

于 2013-05-26T18:11:17.683 回答
5

您也许可以在 pull-right 父容器中添加 pull-left 和 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>

演示在这里

希望这可以帮助

于 2013-05-26T18:09:32.180 回答
0

删除花絮周围的 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>
于 2013-05-26T18:14:02.873 回答
0

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

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

于 2013-05-26T18:16:25.200 回答