html - 使用引导 css/css/html 对齐输入字段

Question

我想调整以下内容：

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

我尝试了正确的保证金，但没有帮助。我不确定如何将文本框对齐在一起

Answer 1

.label为元素使用设置宽度。理想情况下，您应该在布局中保持一致，您也可以为所有文本使用标签，但设置宽度 +display: inline-block将起作用。您当然可以根据需要更改宽度。

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

Answer 2

您还可以使用 twitter bootstrap form-horizontalcss 类及其子组件类来满足您的要求。我修改了您的代码的一些样式，但您可能会从以下参考中获得您想要的（请参阅下面链接中的水平形式）

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

演示：http: //jsfiddle.net/qP46X/1269/