Is possible to simulate a <br/> without a <br/>? - css

Question

Please, take a look to this piece of code:
<span class="something">
<label>test1</label><br/>
<label>test2</label><br/>
<label>test3</label>
</span>
This will create a vertical list of labels. Is possible to do this without the <br> tags using CSS? It is, is possible to show the same vertical aligned label list with this HTML code?:
<span class="something">
<label>test1</label>
<label>test2</label>
<label>test3</label>
</span>

Answer 1

You could do this:
span.something label {
display: block; /* as opposed to display: inline; */
}
This works because by default <label>s are inline elements. If you change them to display block they will display in a list with line breaks between them.
However this is probably a bad way to do what you want. What you really want is an unordered list:
<ul class="something">
<li>test1</li>
<li>etc...</li>
</ul>
To get rid of the bullet points:
ul.something {
list-style: none;
}

Answer 2

Or, without changing the contents of the span to block elements:
span.something label:after {content: '\A'; white-space: pre-line}
See http://jsfiddle.net/VsnKx/
Edit: Another way (if you don't mind floats) is
span.something label {float:left; clear:both}
which doesn't use :after, although it does use floats, which may be undesirable. You also will have to clear the first element after the span.

Answer 3

You can set display:block for the labels, which will adjust them to be displayed on a new line.
Example:
http://jsfiddle.net/niklasvh/eZ8t5/

Answer 4

It is possible. Use this css code:
span.something label{
display:block;
clear:both;
}

Answer 5

Yes, there are several ways, those mentioned in other answers as well as setting label { display: table-row}. However, there is no apparent reason not to use br tags or div containers or a table in HTML, if you want the labels on separate lines, and no apparent reason for wanting that (what is a label without an associated input field?).