Create new line or line break using CSS

Question

I have a a bunch of radio button & labels as following:

<input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
<label for="">Yes </label>

<input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
<label for="">No </label>

<input type="radio" id="FID3626" name="Discipline" value="May be" class="" title="" data-test="test">
<label for="">May be </label>

<input type="radio" id="FID3626" name="Discipline" value="Option A" class="" title="" data-test="test">
<label for="">Option A </label>

<input type="radio" id="FID3626" name="Discipline" value="Option B" class="" title="" data-test="test">
<label for="">Option B </label>

<input type="radio" id="FID3626" name="Discipline" value="Option C" class="" title="" data-test="test">
<label for="">Option C </label>

<input type="radio" id="FID3626" name="Discipline" value="Option D" class="" title="" data-test="test">
<label for="">Option D </label>

<input type="radio" id="FID3626" name="Discipline" value="Option E" class="" title="" data-test="test">
<label for="">Option E </label>

And these are generated from metadata. After rendering, these appear in one line, which is normal.

I need each of the label & its radio in one line. I need to this using CSS. For some reason i cannot keep the input & label under one div.

Thanks in advance.

You can use css property of `display:block;` [See here](http://stackoverflow.com/questions/2703601/how-to-give-line-break-from-css-without-using-br) — Rahul R G, Mar 31 '16 at 10:08

score 5 · Accepted Answer · answered Mar 31 '16 at 10:07

Use the pseudo element ::after. Check below example.

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

<input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
<label for="">Yes</label>

<input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
<label for="">No</label>

<input type="radio" id="FID3626" name="Discipline" value="May be" class="" title="" data-test="test">
<label for="">May be</label>

<input type="radio" id="FID3626" name="Discipline" value="Option A" class="" title="" data-test="test">
<label for="">Option A</label>

<input type="radio" id="FID3626" name="Discipline" value="Option B" class="" title="" data-test="test">
<label for="">Option B</label>

<input type="radio" id="FID3626" name="Discipline" value="Option C" class="" title="" data-test="test">
<label for="">Option C</label>

<input type="radio" id="FID3626" name="Discipline" value="Option D" class="" title="" data-test="test">
<label for="">Option D</label>

<input type="radio" id="FID3626" name="Discipline" value="Option E" class="" title="" data-test="test">
<label for="">Option E</label>

score -1 · Answer 2 · answered Mar 31 '16 at 10:13

here you go

label { display: block; }

<label for="">Yes
  <input type="radio" id="FID3626" name="Discipline" value="Yes" class="" title="" data-test="test">
</label>

<label for="">No
  <input type="radio" id="FID3626" name="Discipline" value="No" class="" title="" data-test="test">
</label>

Create new line or line break using CSS

2 Answers2