Как получить входные радиоэлементы для горизонтального выравнивания?

Question

Я хочу, чтобы эти входы радио, чтобы растянуть на экране, а не один под другим:

HTML

<input type="radio" name="editList" value="always">Always 
<br> 
<input type="radio" name="editList" value="never">Never 
<br> 
<input type="radio" name="editList" value="costChange">Cost Change 

CSS

input[type="radio"] { 
    margin-left:10px; 
} 

http://jsfiddle.net/clayshannon/8wRT3/13/

Я monkeyed вокруг с характеристиками отображения, и googled, и bang (bung? binged?) для ответа, но не нашли его.

Answer 1

В вашем случае вам просто нужно удалить разрывы строк (<br> тегов) между элементами - input элементов - inline-block по умолчанию (по крайней мере, в Chrome). (updated example).

<input type="radio" name="editList" value="always">Always 
<input type="radio" name="editList" value="never">Never 
<input type="radio" name="editList" value="costChange">Cost Change 

---

я предлагаю использовать <label> элементы, хотя. При этом щелчок на ярлыке также проверяет элемент. Либо ассоциировать <label> 's for атрибут с <input>' s id: (example)

<input type="radio" name="editList" id="always" value="always"/> 
<label for="always">Always</label> 

<input type="radio" name="editList" id="never" value="never"/> 
<label for="never">Never</label> 

<input type="radio" name="editList" id="change" value="costChange"/> 
<label for="change">Cost Change</label> 

..or обернуть <label> элементы вокруг <input> элементов непосредственно: (example)

<label> 
    <input type="radio" name="editList" value="always"/>Always 
</label> 
<label> 
    <input type="radio" name="editList" value="never"/>Never 
</label> 
<label> 
    <input type="radio" name="editList" value="costChange"/>Cost Change 
</label> 

Вы также можете получить фантазии и используйте :checked pseudo class.

Answer 2

Здесь обновляется Fiddle

Просто удалите </br> между входом радиоприемника

<div class="clearBoth"></div> 
<input type="radio" name="editList" value="always">Always 
<input type="radio" name="editList" value="never">Never 
<input type="radio" name="editList" value="costChange">Cost Change 
<div class="clearBoth"></div> 

Answer 3

Чтобы получить переключатель, чтобы перечислить горизонтально, просто добавьте

RepeatDirection = "Horizontal"

к ваш .aspx-файл, в котором объявляется asp: radiobuttonlist.