我希望将以下形式对齐所有文本框应该在一行
<form action="AddItems" method="post">
<div class="box">
<span class="label"> Item Name</span>
<span class="ib"> <input type="text" name="item_name" id="item_name"/></span>
</div>
<div class="box">
<span class="label">Item Id </span>
<span class="ib"> <input type="text" name="item_id" id="item_id"/>
</span>
</div>
<div class="box">
<span class="label">Color </span>
<span class="ib"><input type="text" name="item_color" id="item_color"/></span>
</div>
<div class="box">
<span class="label">Size</span>
<span class="ib"> <input type="text" name="item_size" id="item_size"/></span>
</div>
<div class="box">
<span class="label">Supplier </span>
<span class="ib"><input type="text" name="item_supplier" id="item_supplier"/></span>
</div>
<div class="box">
<span class="label">Quantity </span>
<span class="ib"> <input type="text" name="item_quantity" id="item_quantity"/></span>
</div>
<div class="box">
<span class="label">Unit Price </span>
<span class="ib"> <input type="text" name="item_unit_price" id="item_unit_price"/></span>
</div>
<div class="box">
<span class="label">Discount Percentage </span>
<span class="ib"> <input type="text" name="discount_per" id="discount_per"/>
</span></div>
<div class="box">
<input type="button" id="submit_items" value="Submit"/>
</div>
</form>
答案 0 :(得分:1)
我认为你正在寻找类似的东西。
<强> WORKING DEMO 强>
CSS代码:
.box span.label {
display: inline-block;
margin-bottom: 20px;
vertical-align: top;
width: 80px;
}
您可以分别减少/增加margin-bottom
以获得更少/更多的间距。
答案 1 :(得分:0)
试试这个:
div.box{
display:inline;
/* Or
display:inline-block;
Or
float:left;
*/
}
这会将div中的所有文本框与类box
对齐为内联。
Fiddle
供参考检查此链接:
答案 2 :(得分:0)
这样做。这是最好的方式。这将适用于所有浏览器,而不会影响设计。
.box
{
float:left; /*or right according to your choice.*/
}
答案 3 :(得分:0)