1

以下を揃えたいと思います。

<div class="span5">
                    <div class="">
                        <span class="label">Label1</span>
                        <input type="text" class="input-medium" placeholder="0">
                    </div>
                    <div class="">   
                        <span class="label">Label2</span>
                        <input type="text" class="input-medium" placeholder="0" >
                    </div>
                    <div class="">   
                        <label class="checkbox inline">
                        <input type="checkbox"><span>Something</span>
                        </label> 
                        <input type="text" class="input-medium" placeholder="0">
                    </div>       
                    <div class="">     
                        <span class="label">Label4</span>  
                        <input type="text" class="input-medium" placeholder="0">
                    </div>
                    <div class="">
                        <span class="label label-inverse">Label5</span>
                        <input type="text" class="input-medium" placeholder="0">  
                    </div>
                </div>

これがフィドルです： http://jsfiddle.net/qP46X/1267/

マージンを正しく試しましたが、役に立ちませんでした。テキストボックスを並べる方法がわかりません

4

2 に答える 2

3

.label要素に設定された幅を使用します。理想的には、レイアウトに一貫性があり、すべてのテキストにラベルを使用することもできますが、設定された幅 +display: inline-blockが機能します。もちろん、必要に応じて幅を変更できます。

http://jsfiddle.net/qP46X/1268/

于 2013-03-28T14:02:05.257 に答える
2

Twitter ブートストラップform-horizontalCSS クラスとそのサブコンポーネント クラスを使用して、要件を満たすこともできます。私はあなたのコードのスタイリングを少し変更しましたが、以下の参照からあなたが望むものを正確に達成するかもしれません(以下のリンクの水平フォームを参照してください)

参考：http ://twitter.github.com/bootstrap/base-css.html#forms

デモ: http://jsfiddle.net/qP46X/1269/

于 2013-03-28T14:22:40.290 に答える