如何对齐文本框

-2

我要对齐以下形式的所有文本框应在一行如何对齐文本框

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

来源

2013-10-21 xrcwrn

css请???? –

我认为你正在寻找类似的东西。

WORKING DEMO

CSS代码：

.box span.label { 
    display: inline-block; 
    margin-bottom: 20px; 
    vertical-align: top; 
    width: 80px; 
}

您可以减少/增加分别为margin-bottom以下/以上的间距。

来源

2013-10-21 05:35:38 Nitesh

试试这个：

div.box{ 
     display:inline; 
     /* Or 
     display:inline-block; 
      Or 
     float:left; 
     */ 
    }

这将对准里面的div所有的文本框与box类作为内联。 Fiddle

参考检查此链接：

来源

2013-10-21 05:24:46 super

执行此操作。这是最好的方法。这可以在所有浏览器上正常工作，而不会影响设计。

.box 
{ 
float:left; /*or right according to your choice.*/ 
}

来源

2013-10-21 05:29:38

我想你指的垂直线，加上这个类：

jsFiddle

.label{ 
    display:block; 
    float:left; 
    min-width:150px; 
}

，但如果你想要把<input> S IN一个水平线上，你必须使用floatfor .box是这样的：

.box 
{ 
    float:left; 
}

注意必须只要设置你的容器宽度，所有.box是一条线。这行：jsFiddle

来源

2013-10-21 05:34:44

如何对齐文本框

回答

相关问题