如何将单选按钮保持在表单的同一行

Question

我有一个带有输入框和单选按钮的表单。如果我在跳到下一行的<td> 中有长文本，这会以某种方式影响第二个单选按钮，从而使标签和单选按钮堆叠在一起。 查看此小提琴中的实时代码http://jsfiddle.net/leopardy/bLnLwoht/

我尝试过的事情：
- 如果我删除长文本，例如删除“洲际”这个词，这可以解决我的问题，但我需要那个长词。
- 如果我将表单区域的宽度更改为更大的值，例如 500 像素，这也可以解决我的问题，但我需要表单的宽度为 450 像素，输入框的宽度为 200 像素。

另外，我希望能够将它们全部放在同一行，而不必将我的单选按钮放在不同的行上。理想情况下，我希望将“已启用”一词与其上方的输入框对齐，然后是单选按钮，然后是“禁用”一词，然后是单选按钮，所有这些都不会超过输入按钮的右侧边界.有没有办法做到这一点？

我也会在这里添加代码：

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>

Answer 1

这里有一个简单的解决方法，将单选按钮和标签放在同一个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>

到：

<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>

见here