Michelle Michelle - 7 months ago 17
HTML Question

Radio buttons are too far spaced

I'm currently making a website and I'm creating a form that allows the user to input their name, email, gender and date of birth. My problem is that I'm using label for=""
to allow the css to have each section to align with the one above

<form>
<table>
<tr>
<td><label for="Email">Please enter e-mail:</label></td>
<td><input id="email" type="text" name="email" title="email address" align="right" size="40"/></td>
</tr>
<tr>
<td><label for="Name">Please enter your full name:</label></td>
<td><input id="name" type="text" name="name" title="name" align="right" size="40"/></td>
</tr>
<tr>
<td><label for="DOB">Please enter your date of birth</label></td>
<td><input id="DOB" type="date" name="DOB" title="DOB" align="right"/></td>
</tr>
<tr>
<td><label for="gender">Please select your gender</label></td>
<td><input id="male" type="radio" name="male" title="male"/>Male<td><input id="female" type="radio" name="female" title="female"/>Female</td>
</tr>
<tr>
<td>
<label for="submit"><input type ="submit" value="Submit"></label>
</td>
</tr>
</table>
</form>


My css is:

label {
margin-left:400px;
}


But my radio buttons are too far apart at the moment and I can't seem to get them to move closer together. The radio buttons can be seen at this image

radio buttons

If the image isn't showing you can see it here: http://www.howilearn2.com/student/NonStudentIndex.html

Answer

You current are using a <table> to handle this formatting, however one of your radio buttons is placed in the third column (as opposed to being in the second with your other radio button).

Try placing them both in the same <td> element :

<td>
    <input id="male" type="radio" name="male" title="male"/>Male
    <input id="female" type="radio" name="female" title="female"/>Female
</td>

You can see an example of this here and demonstrated below :

enter image description here