Каков наилучший способ выравнивания кнопок по левому краю друг над другом? - PullRequest
Новая
       25

Каков наилучший способ выравнивания кнопок по левому краю друг над другом?

4 голосов
/ 16 декабря 2010

У меня есть куча радио кнопок, и у меня есть 

<br/>

после каждого, и все они, кажется, выровнены по центру по горизонтали (даже если я добавлю CSS с надписью выравнивание по левому краю)

Вот CSS, 

.radioLeft
{
    text-align:left;
}

Вот HTML: 

 <input checked="checked" class="radioLeft"  name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
 <input checked="checked" class="radioLeft"  name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
 <input checked="checked" class="radioLeft"  name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>

Ответы [ 4 ]

5 голосов
/ 16 декабря 2010

Вы не должны применять этот стиль к радиостанциям, но к контейнеру, в котором они находятся, в этом случае вы можете добавить div: 

<div class="radioLeft">
  <input checked="checked" name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
   <input checked="checked" name="CalendarType" value="2" type="radio"><b>Event </b>(False) <br>
   <input checked="checked"  name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>
</div>
2 голосов
/ 16 декабря 2010

Попробуйте использовать следующий стиль CSS. 

.radioLeft input{
    text-align: left;
    display:inline;
}
0 голосов
/ 16 декабря 2010

Вы должны проверить выравнивание контейнера, который их окружает.

0 голосов
/ 16 декабря 2010

Вы пытаетесь добавить свойство CSS, которое применяется только к элементам уровня блока (например, div), к встроенному элементу (input). Это не сработает; вам нужно создать элемент уровня блока (я решил использовать label и сделать его уровнем блока с помощью CSS, но это только для семантики) и использовать его для хранения каждой метки.

Попробуйте обернуть каждый элемент в label с классом .radioLeft, удалить этот класс из входных данных, а затем добавить этот CSS: 

.radioLeft {
  display: block;
  text-align: left;
}

Например, 

<label class="radioLeft"><input type="radio"><b>Person</b>(False)</label>
...