如何對齊文本框

-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

如何對齊文本框

回答

相關問題