выравнивание радиокнопки

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

Поместите их в таблицу, как это:

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

Добавить незавершенные пробелы   между переключателями;

Answer 3

Вы можете обернуть ввод и текст в div и установить свойство float css для div.

Answer 4

Используйте это:

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

Answer 5

Есть несколько решений для этого:

1. Вы можете обернуть другую таблицу вокруг радиокнопок и добавьте каждый в ячейку таблицы.
2. Добавить <br/> после каждого варианта.
3. Вы можете плавать радиокнопками.
4. Вы можете добавить 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> 

И СМЧ:

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

Answer 6

Дайте вашим радио кнопки и метки класса следующим образом:

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

Это улучшение по сравнению с флоит метода, поскольку поплавок часто требует дополнительной семантики для предотвращения нежелательного рендеринга, в то время как встроенный блок не делает.