单选按钮对齐

我正在使用单选按钮，但我不确定如何对齐它们的方式。我想他们是在同一行这样的：单选按钮对齐

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>

来源

2011-02-04 user517406

增加td的宽度以适应。 – Vinnyq12 2011-02-04 14:01:18

把它们放在一个表是这样的：

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

这给了你关于之间或对齐父对象空间最大的灵活性。

来源

2011-02-04 14:01:05

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

来源

2011-02-04 14:01:56

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

来源

2011-02-04 14:02:30 Distdev

使用此：

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

来源

2011-02-04 14:02:50 danx

这不会按预期工作，因为其他行每个只有一个单元格。 – 2011-02-04 14:05:06

你有没有注意到'colspan = 2'的东西？ – danx 2011-02-04 14:17:41

有多种方案来解决这个：

你可以环绕单选按钮另一个表，并添加每一个到一个表格单元格。
每个选项后添加一个<br/>。
您可以浮动单选按钮。
您可以将一个display:inline或display:inline-block添加到单选按钮。

我宁愿在<label>标签内两个单选按钮，它的标签和应用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; 
}

来源

2011-02-04 14:04:32

给你的单选按钮和标签类，如下所示：

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

这是在浮法方法的改进，因为浮动经常需要额外的语义以避免意外的渲染，而inline-block的没有。

来源

2011-05-27 02:54:03

单选按钮对齐

回答

相关问题