How to align text boxes

Question

I want to align following form all text boxes should at one line

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

score 1 · Accepted Answer · answered Oct 21 '13 at 05:35

I think you are looking for something similar to this.

WORKING DEMO

The CSS Code:

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

You can reduce/increase margin-bottom for less/more spacing respectively.

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Try this :

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

this will align all your text boxes inside div with class box as inline. Fiddle

for reference check this links :

edited May 23 '17 at 11:50

Community

1
1

answered Oct 21 '13 at 05:24

super

2,288
2
21
23

score 0 · Answer 3 · 2013-10-21T05:34:48.493

0

Do this. It's best way. This will work well on all browsers without compromising with design.

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

edited Oct 21 '13 at 05:34

answered Oct 21 '13 at 05:29

score 0 · Answer 4 · answered Oct 21 '13 at 05:34

I think you mean vertical line, add this class :

jsFiddle

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

but if you want to put <input>s in one horizontal line you must use floatfor .box like this:

.box
{
    float:left;
}

note that you must set your container width as long as that all .box be in one line. line this: jsFiddle

How to align text boxes

4 Answers4