How to keep radio buttons on one line in a form
I have a form with input fields and radio buttons. If I have long text in <td>
that jumps to the next line, it somehow affects the second radio button so that the label and radio button toggle. See the code in this fiddle http://jsfiddle.net/leopardy/bLnLwoht/
Things I've tried:
-If I remove a long text, for example remove the word "Intercontinental", that fixes my problem, but I need this long word.
-If I change the width of the form area to something larger, say 500px, that also fixes my problem, but I need the form width to be 450px and the input fields to be 200px.
Also, I would like to be able to keep everything on one line and not include my switches on separate lines. Ideally I would like the word "Enabled" to be aligned with the input field above it, followed by a radio button followed by the word "Disabled" and then a radio button and all this without going through the right side borders of the enter button. Is there a way to do this is?
I'll add some code as well:
CSS
.form_area {
height: auto;
width : 450px;
}
.inputs_table input[type="text"] {
width: 200px;
}
Html
<div class="form_area">
<form id="create_form">
<div>
<table class="inputs_table">
<tbody>
<tr>
<td>Name:</td>
<td>
<input name="name" id="name_input" type="text" >
</td>
</tr>
<tr>
<td>Intercontinental Location:</td>
<td>
<input id="location_input" type="text">
</td>
</tr>
<tr>
<td>Feature:</td>
<td>
<label for="one">Enabled</label>
<input type="radio" id="input_enabled" name="feature" value="true">
</td>
<td>
<label for="two">Disabled</label>
<input type="radio" id="input_disabled" name="feature" value="false" />
</td>
</tr>
</tbody>
</table>
</div></form></div>
source to share
There is a simple fix here, put both radio buttons and labels in the same onetd
.
So change:
<td>
<label for="one">Enabled</label>
<input type="radio" id="input_enabled" name="feature" value="true">
</td>
<td>
<label for="two">Disabled</label>
<input type="radio" id="input_disabled" name="feature" value="false" />
</td>
in
<td>
<label for="one">Enabled</label>
<input type="radio" id="input_enabled" name="feature" value="true">
<label for="two">Disabled</label>
<input type="radio" id="input_disabled" name="feature" value="false" />
</td>
See here
source to share