HTML and CSS Reference
In-Depth Information
Using the same markup as the previous example and the following
CSS, you can have a grid where labels are on the left of the input field
(
Figure 11.6
):
label {
float: left;
clear: left;
width: 150px;
margin: 0 10px 0 0;
padding: 0;
text-align: right;
}
input {
margin: 0 0 1em 0;
}
Figure 11.6
Labels to left of
form elements.
In the example of the previous label, the form element labels for radio
button sets would appear quite awkward with one little small element
per line. In the label besides the field example, it may be desirable to
have all options on a single line. Or sometimes a check box is associated
with a long passage of text such as a legal disclaimer.
