What is the best way to left align radio buttons on top of each other?

I have a bunch of radio buttons, and I have a

<br/>

after each one and they all seem to horizontal align center (even if I put some CSS that says left align).

Here is the CSS,

.radioLeft
{
    text-align:left;
}

Here is the 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>Ev开发者_运维问答ent </b>(False) <br>
 <input checked="checked" class="radioLeft"  name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br>

---

You shouldn't apply this style to the radios but to the container they are on, in that case you can add a 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>

---

Try with the following CSS style.

.radioLeft input{
    text-align: left;
    display:inline;
}

---

You should check the alignment of the container that surrounds them.

---

You try to add a CSS property that only applies to block-level elements (like div) to an inline element (input). This won't work; you need to create a block-level element (I chose to use label and make it block-level using CSS, but that's just for semantics) and use it to contain each label.

Try wrapping each in a label with class .radioLeft, remove that class from the inputs, and then add this CSS:

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

For example,

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