單選按鈕對齊

我正在使用單選按鈕，但我不確定如何對齊它們的方式。我想他們是在同一行這樣的：單選按鈕對齊

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

單選按鈕對齊

回答

相關問題