Question

我正在使用单选按钮，但我不确定如何将它们按照我想要的方式对齐。我希望他们像这样在同一条线上：

Option 1 o   Option 2 o

但它们看起来像这样：

Option 1 o
Option 2 o

这是我的HTML，有人可以提供建议吗？

<table>
                <tr>
                    <td>
                        <label for="lblMeterName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Input/Output Group :
                    </td>
                    <td>
                        <input type="radio" name="rdoInput" value="Yes"/> Yes
                        <input type="radio" name="rdoInput" value="No"/> No
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="dialogButton" name="dialogButton" value="Submit" />
                    </td>
                </tr>
            </table>

Answer 1

按照以下方式为您的单选按钮和标签添加一个类：

<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>

然后应用以下CSS：

.inline-radio {
    display: inline-block;
}

这是对 float 方法的改进，因为float通常需要额外的语义来防止不需要的渲染，而inline-block则不需要。

Answer 2

将它们放在这样的表格中：

                <td>
                  <table><tr><td>
                    <input type="radio" name="rdoInput" value="Yes"/> Yes
                  </td><td>
                    <input type="radio" name="rdoInput" value="No"/> No
                  </td></tr></table>
                </td>

这为您提供了与父对象之间的空间或与父对象对齐的最大灵活性。

Answer 3

您可以将输入和文本包装到div中，并为div设置float css属性。

Answer 4

有多种解决方案：

您可以在radiobuttons周围包裹另一个表格，并将每个表格添加到表格单元格中。
在每个选项后添加<br/>。
你可以漂浮无线电按钮。
您可以在radiobuttons中添加display:inline或display:inline-block。

我希望在<label>代码中包装radiobutton及其标签并应用float，因为这会使标签也可以点击并为您提供更多灵活性：

<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label> <label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>

CSS：

label.radio-label { float: left; margin-right: 10px; }

Answer 5

在单选按钮之间添加不间断空格 ;

Answer 6

使用此：

<table>
<tr>
  <td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
  <td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
  <td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>

单选按钮对齐

6 个答案: