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

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

Я обезьяны со свойствами экрана, и googled, и bang (bung? binged?) для ответа, но не нашли его.

Ответы

Ответ 1

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

<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> for с <input> id: (пример)

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

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

<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 псевдокласс.

Ответ 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>

Ответ 3

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

RepeatDirection = "Горизонтальный"

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