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:
Search WWH ::

Custom Search