Question

I wrote the following :

<ul>
    <li>
        <span class="filter">
            <label>Name: </label><input type="text"/>
        </span>
    </li>
    <li>
        <span class="filter">
            <label>Id: </label><input type="text"/>
        </span>
    </li>
</ul>​

with the CSS as :

span.filter{
    width: 50px;
}
input{
    text-align: right;
}
label{
    text-align: left;
}
ul{
    list-style: none;
}​

But the result is as shown in this fiddle. Some people suggest using floats, but why is this not working ?

Answer 1

If you want to achieve this effect using floats, set the display property of your labels to block, declare their width, and float them left. Then float your inputs left and us clear:left on the label elements so that they don’t wind up all on one line.

so:

label{
display:block;
width:50px; /*arbitrarily determined */
float:left;
clear:left;
} 

input{
float:left; 
}

See the result in this fiddle.

You can also do this using display:inline-block (and hence less code) as indicated in xiaoyi’s answer.

Another way is to use table cells, which (while some consider them semantically appropriate to forms) are not something you generally want to rely on for layout.