HTML and CSS Reference
In-Depth Information
9. To overcome this problem, convert the
<fieldset
>
to a
<div
>
with the class
radio
,
and the
<legend
>
to a
<span
>
like this:
<
div class="radio"
>
<
span
>How much do you earn?</
span
>
<p>
<label>
<input type="radio" name="income" value="< 20 K" id="income 0">
Under $20,000</label>
<br>
<!-- Other buttons omitted -->
</p>
</
div
>
10. Change the selectors to reflect the changes to the HTML markup like this:
form p,
div.radio
{
display: table-row;
}
label, input, select, textarea,
span, .radio p
{
display: table-cell;
vertical-align: top;
padding: 3px;
margin: 6px;
}
.radio input, .radio label
{
display: inline;
}
11. To align the submit button with the other input elements, add an empty
<span
>
in the
final paragraph to generate an empty cell in the last row like this:
<p>
<span> </span>
<input type="submit" name="send" id="send" value="Send">
</p>
12. Save the HTML page and the style sheet, and test the form. In most modern
browsers, it's now laid out in a neat grid, as shown in Figure
12-18
.
