What is the best way to set switch switches to each other?

Question

I have a bunch of switches, and I have

<br/> 

after each of them, and they all seem to be horizontal alignment centers (even if I apply some CSS that says left alignment).

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>Event </b>(False) <br> <input checked="checked" class="radioLeft" name="CalendarType" value="3" type="radio"><b>Release</b>(False) <br> 

Answer 1

You should not apply this style to the radio, but to the container on which they are installed, in this 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> 

Answer 2

Try using the following CSS style.

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

Answer 3

You are trying to add a CSS property that applies only to block level elements (such as a div ) to an inline element ( input ). This will not work; you need to create a block level element (I decided to use a label and make it a block level using CSS, but this is only for semantics) and use it to place each label.

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

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

For instance,

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

Answer 4

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