Как выровнять текстовые поля

Question

Я хочу, чтобы выровнять следующую форму все текстовые поля должны в одной строке

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

Answer 1

Я думаю, что вы ищете нечто похожее на это.

WORKING DEMO

The CSS Код:

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

Вы можете уменьшить/увеличить margin-bottom за меньшие/больше расстояния соответственно.

Answer 2

Попробуйте это:

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

это будет выравнивать все текстовые поля внутри DIV с классом box как встроенный. Fiddle

для контрольной проверки этой ссылки:

• Drawback of CSS: display:inline-block vs float:left
• Difference between Float:left vs Display:inline

Answer 3

ли это. Это лучший способ. Это будет хорошо работать во всех браузерах без ущерба для дизайна.

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

Answer 4

Я думаю, что вы имеете в виду вертикальную линию, добавить этот класс:

jsFiddle

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

---

, но если вы хотите поставить <input> с в одной горизонтальной линии, которую вы должны использовать floatfor .box примерно:

.box 
{ 
    float:left; 
} 

обратите внимание, что необходимо установить ширину контейнера до тех пор, как все .box быть в одной строке. line это: jsFiddle