Question

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

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

此外，我希望能够将所有内容保存在同一行，而不必将我的单选按钮放在单独的行上。理想情况下，我想将“启用”一词与其上方的输入框对齐，然后是单选按钮，后跟单词“禁用”，然后是单选按钮，所有这些都没有通过输入按钮的右侧边界。有没有办法做到这一点？

我也会在这里添加代码：

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

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

1 个答案: