html - How to make a label display in a vertical list but still hold the properties of inline-block -

i'm using labels radio buttons because love ability click on text effect radio button. want them display in vertical list. problem displaying block spread across whole page , user click on white space right of answer activate it.

i know can wrap label in div, , have div display block , have contained label display inline-block. problem have 100's of labels need adjust change i'd prefer straight css if possible.

i able use float: left , clear: both desired effect problem other elements on page not displaying , dramatically effect this.

label {      display: block;      cursor: pointer;    }

<label>    <input type="radio"/>    answer   </label>   <label>    <input type="radio"/>    answer   </label>   <label>    <input type="radio"/>    answer   </label>   <label>    <input type="radio"/>    answer   </label>

solution:

use ::after pseudo element fill rest of line, this:

label::after {   content: "";   display: block; } 

---

jsfiddle

---

code snippet:

label {    cursor: pointer;  }  label::after {    content: "";    display: block;  }

<label>    <input type="radio" />answer  </label>  <label>    <input type="radio" />answer  </label>  <label>    <input type="radio" />answer  </label>  <label>    <input type="radio" />answer  </label>

---

side note:

as side note, if want have older browser support can use :after instead of ::after. difference 1 css2 syntax , other css3, respectively.

in css3 changed syntax differentiate between psuedo-elements , pseudo-classes.

ie8 supports single-colon css 2.1 syntax (i.e. :pseudo-class). not support double-colon css3 syntax (i.e. ::pseudo-element).