如何防止用浮动权划分div？（bootstrap）

我有以下的HTML。并且右边的文字（珍闻）不断下降到下一行。这是在铬。有没有办法让一条线里面的拉格系列内部保持一致？这里是jsFiddle。如何防止用浮动权划分div？（bootstrap）

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

来源

2013-05-26 Arturo Hernandez

我发现'min-width' CSS属性是有用的每个这[相关问题]（http://stackoverflow.com/questions/18709418/how-to-avoid-text-wrapping-in- A-TD-与-文本和一个右浮动的标签）。 –

你或许可以拉右父容器中添加拉左，右拉

<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

希望这有助于

来源

2013-05-26 18:09:32 Dhiraj

您可以有两个这样做更正：

在“tidbit”div中设置display: inline-block。
将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

来源

2013-05-26 18:11:17 Sirko

为什么文本垂直对齐底部。有没有办法与中心对齐？这也可以工作，但垂直对齐对我来说是个问题。 –

@ArturoHernandez我并没有真正得到，你的意思是什么，但可能你可以使用'margin'/'padding'来调整... – Sirko

各地珍闻删除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-26 18:14:02

好的，我应该对我的问题更加明确。但是我需要宽度，否则我随机的花絮使得对齐全部失控。 –

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

如果这3个的宽度超过500px，则消息文本将移动到下一行。所以控制宽度

来源

2013-05-26 18:16:25

如何防止用浮动权划分div？ （bootstrap）

回答

相关问题

如何防止用浮动权划分div？（bootstrap）