CSS to align label and inputs on form

问题

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

enter image description here

Which is produced with HTML like so:

...
<ul>
    <li>
      <label for="STREET">Street</label>
      <input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
    </li>
    <li>
      <label for="SUITE">Suite</label>
      <input id="SUITE" name="SUITE" type="text" value="" />
    </li>
    <li>
      <label for="city">City</label>
      <input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
    </li>
...

Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.

It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.

Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?

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

回答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/

回答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;
}

li label{
    float:left;
}

li input{
    float:right;
}

here's a fiddle

回答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).

回答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><label for="street">Street</label></td>
                <td><input type="text" name="street"></td>
            </tr>
            <tr>
                <td><label for="suite">Suite</label></td>
                <td><input type="text" name="suite"></td>
            </tr>
            <tr>
                <td><label for="city">City</label></td>
                <td><input type="text" name="city"></td>
            </tr>
            <tr>
                <td><label for="state_region">State or Region</label></td>
                <td><select><option>Arizona</option></select></td>
            </tr>
            <tr>
                <td><label for="pc">Postal Code</label></td>
                <td><input type="text" name="pc"></td>
            </tr>
            <tr>
                <td><label for="country">Country</label></td>
                <td><select><option>USA</option></select></td>
            </tr>
            <tr>
                <td><label for="phone">Phone</label></td>
                <td><input type="text" name="phone"></td>
            </tr>
            <tr>
                <td><label for="fax">Fax</label></td>
                <td><input type="text" name="fax"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="text" name="email"></td>
            </tr>
        </table>
    </form>
</body>

来源：https://stackoverflow.com/questions/19940103/css-to-align-label-and-inputs-on-form

标签

html

css

layout