对齐引导中的上下文/附加文本框

我不能为我的生活弄清楚如何在表格单元格中排列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

对齐引导中的上下文/附加文本框

回答

相关问题