對齊引導中的上下文/附加文本框

我不能爲我的生活弄清楚如何在表格單元格中排列2個前置文本和附加文本框。有沒有人成功地做過這件事我已經搞砸與顯示，float和寬度選項...對齊引導中的上下文/附加文本框

<td class="success"> 
<div class="input-prepend"> 
    <span class="add-on"> USD $ </span> 
    <input type="text" class="input-small pi-dollarchange"> 
</div> 
<div class="input-append"> 
    <input type="text" class="input-small pi-perchange"> 
    <span class="add-on"> % </span> 
    </div> 
    </td>

來源

2013-02-18 dougmays

他們爲什麼在一個表格單元格？你的桌子上有表格標籤嗎？ – 2013-02-18 22:29:06

這兩個包含DIVs都必須左移，我想將它們水平排列。顯然，表格單元需要足夠的寬度來容納兩個輸入。一般來說，除非是顯示的表格日期，否則不應使用表格進行佈局。 – 2013-02-18 22:37:01

的jsfiddle Jsfiddle with example

要對齊的投入和標籤正確地做到以下幾點： -
1.包裹標籤和控件在.control-group 。
2.將.control-label添加到標籤
3.將.controls中的所有關聯控件包裝爲正確對齊。

<div class="control-group"> 
    <label class="control-label" for="inputDollars">Dollars</label> 
    <div class="controls"> 
     <div class="input-prepend"> <span class="add-on"> USD $ </span> 

      <input type="text" class="input-small pi-dollarchange" 
      placeholder="dollar"> 
     </div> 
    </div> 
</div> 
<div class="control-group"> 
    <label class="control-label" for="inputPercentage">Percentage</label> 
    <div class="controls"> 
     <div class="input-append"> 
      <input class="span2 pi-perchange" id="appendedInput" type="text" placeholder="percentage"> <span class="add-on"> % </span> 

     </div> 
    </div> 
</div>

來源

2013-02-19 03:11:14 Shail

對齊引導中的上下文/附加文本框

回答

相關問題