HTML and CSS Reference
In-Depth Information
Here, we're floating both
input
and
label
elements to the left so that they are now butted
up against one another. To achieve the line break each time, we have a new label/field pair: we
apply
clear: left
to labels. We set the
label
element's width to 9em (plus a padding of 1em
on the right, for a total width of 10em) and aligned the text to the right. Finally, we set the
line-height
attribute to 1.8em, approximately the same as the default height of our input
boxes. (Note that because every browser's input box height is slightly different and there's no
consistent way to make it the same, this is nonexact. It is, however, quite close.)
Since we're again floating elements within our
fieldset
, we'll want the
br { clear: both; }
in our style sheet.
The result is almost exactly what we'd hoped for (see Figure 11-14).
Figure 11-14.
Example form after styling for the clean middle line
The one notable quirk here is that our credit card type labels don't quite align with their
radio boxes. This is because our
line-height
setting of
1.8em
was chosen to duplicate the
height of the input text boxes, but radio buttons are shorter. A
line-height
of
1.2em
seems to
achieve the desired effect:
