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-horizontal css类及其子组件类来满足您的要求。我修改了代码的一些样式，但您可能会从下面的参考中获得您想要的内容（请参阅以下链接中的水平表单）

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

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

使用bootstrap css / css / html对齐输入字段

2 个答案: