CODEWITHSUNDEEP
htmlcss
Nuno
Nuno

Reputation: 1163

How to make a <span> inside an <a> display in the same line?

I have this code here in order to create a tag cloud, the tags are <a>'s and inside it I insert a span with the tag's count inside it.

I want them to be always together but in some cases the line breaks although I have the "display: inline" set for the <a> just in case, still it does not work.

Upvotes: 2

Views: 2115

Answers (4)

Virendra
Virendra

Reputation: 2553

Either add display:inline-block; or white-space:nowrap; to your CSS for a tag.

Here are the 2 updated jsfiddles: with display:inline-block; http://jsfiddle.net/k4u8U/5/

with white-space:nowrap; http://jsfiddle.net/k4u8U/6/

Upvotes: 0

Emil
Emil

Reputation: 8527

You need to add white-space:nowrap to the a element.

See the modified example http://jsfiddle.net/k4u8U/4/

Upvotes: 1

Chris Subagio
Chris Subagio

Reputation: 6339

You want to add white-space:nowrap; to your css. That tells the browser to disable any text wrapping inside the element.

Updated fiddle: http://jsfiddle.net/k4u8U/3/

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65166

Both a and span elements are inline by default. Your problem is that inline elements are word-wrapped, and that works per-word, not per-element.

Either disable word wrapping with white-space: nowrap or make the outer element display: inline-block to make it wrap as a complete element.

Upvotes: 7

Related Questions