Question

I have 30 elements with class .lollipop that has line-height: 30px; height: 30px;.

<a class="lollipop">Random text</a>
<a class="lollipop">Random text longer</a>
<a class="lollipop">Short</a>
...

How do I write the CSS to have dynamic width (their width adapt based on how much text is there inside them, like it usually is) and have only one of these elements per line, possibly without adding other HTML elements?

Answer 1

Possibly the easiest way is:

a {
    float: left;
    clear: left;
}

With this, you don’t have to change the HTML.