How do I set dynamic width to a block element?

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?

@Šime, It's not a list and, quoting the text, `possibly without adding other HTML elements`. — Shoe, Jun 21 '12 at 17:08
30 elements in a row that have the same class? In my book, that's a job for UL/LI. — Šime Vidas, Jun 21 '12 at 17:11

score 3 · Accepted Answer · answered Jun 21 '12 at 17:10

3

Possibly the easiest way is:

a {
    float: left;
    clear: left;
}

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

answered Jun 21 '12 at 17:10

thirtydot

224,678
48
389
349

score 0 · Answer 2 · answered Jun 21 '12 at 17:18

0

You can try display: table-row if you want equal width for all your link, flexible width being calculated to the max width of your links.

Or you can play with :before pseudo to create sort of a clear without floats and clear, in case it'd cause problems in your design.

Fiddle:
http://jsfiddle.net/PhilippeVay/Sm8tK/

answered Jun 21 '12 at 17:18

FelipeAls

21,711
8
54
74

Worth noting that neither of those will work in IE7. Your `:before` example doesn't work in WebKit browsers. It can be fixed: http://jsfiddle.net/thirtydot/Sm8tK/1/ (idea from [here](http://stackoverflow.com/questions/4609279/css-to-line-break-before-after-a-particular-inline-block-item/4609491#4609491)) – thirtydot Jun 21 '12 at 17:22

How do I set dynamic width to a block element?

2 Answers2