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>

      

+3


source to share


1 answer


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

0


source







All Articles