Jleibham Jleibham - 3 months ago 10
CSS Question

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

I'm using some labels for some radio buttons because I love the ability to click on the text to effect the radio button. I want them to display in a vertical list. The problem is currently they are displaying as block so they spread across the whole page and a user could click on the white space to the right of the answer to activate it.

I know I can wrap the label in a div, and have the div display block and have the contained label display inline-block. The problem with this is I have 100's of labels I would need to adjust for this change so I'd prefer to do it with straight CSS if possible.

I was also able to use float: left and clear: both to get a desired effect but the problem with this was other elements on the page were not displaying similarly and dramatically effect by 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>




Answer

SOLUTION:

Use the ::after pseudo element to fill the rest of the line, like 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 a side note, if you want to have older browser support you can use :after instead of ::after. The difference is that one is CSS2 syntax and the other CSS3, respectively.

In CSS3 they changed the syntax to differentiate between psuedo-elements and pseudo-classes.

IE8 only supports the single-colon CSS 2.1 syntax (i.e. :pseudo-class). It does not support the double-colon CSS3 syntax (i.e. ::pseudo-element).

Comments