如何防止用浮動權劃分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）