Css To Align Label And Inputs On Form

April 21, 2024 Post a Comment

I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this: Which is produced with HTML like so: ...

Solution 1:

Here's an option

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle

Solution 2:

it should be enough to set a width to the labels that is larger than the largest label-text

example css

label {
    display:inline-block;
    width:350px;
 }

so all inputs would line up after 350px, is that your desired effect ? http://jsfiddle.net/dKjpk/5/

Solution 3:

Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:

ul{
  width:500px; // or 100%;
}

li{
    width:100%;
    display:block;
}

li{
    list-style:none;
    clear:both;
}

lilabel{
    float:left;
}

liinput{
    float:right;
}

here's a fiddle

Solution 4:

Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.

Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).

Solution 5:

try it like this by creating a table your things are in the same area beneath each other

<html><head><style>label{
            font-weight:bold;
        }
    </style></head><body><form><table><tr><td><labelfor="street">Street</label></td><td><inputtype="text"name="street"></td></tr><tr><td><labelfor="suite">Suite</label></td><td><inputtype="text"name="suite"></td></tr><tr><td><labelfor="city">City</label></td><td><inputtype="text"name="city"></td></tr><tr><td><labelfor="state_region">State or Region</label></td><td><select><option>Arizona</option></select></td></tr><tr><td><labelfor="pc">Postal Code</label></td><td><inputtype="text"name="pc"></td></tr><tr><td><labelfor="country">Country</label></td><td><select><option>USA</option></select></td></tr><tr><td><labelfor="phone">Phone</label></td><td><inputtype="text"name="phone"></td></tr><tr><td><labelfor="fax">Fax</label></td><td><inputtype="text"name="fax"></td></tr><tr><td><labelfor="email">Email</label></td><td><inputtype="text"name="email"></td></tr></table></form></body>

Html5 Academy