如何将div与文本换行连续放置？

Question

I am making an application where tags can be added to posts, much like stackoverflow's tagging system. I want to display a list of all common tags, each in a little box that fits the tag perfectly (like the <input type="submit"> tag stretches to fit the size of the word). How can I do this and have the <div> s align themselves horizontally with text-wrapping in their containing div? Ie something like this, where each word has <div id="tag"> :

tag1 thisisalongtag
biology physics
thiswordwraps science
one two three four

Answer 1

The easiest solution is to style the tag elements with display: inline-block , which allows text-wrapping while preventing margin-collapsing.

• DEMO

Answer 2

display:inline-block

doesn't work on all browsers (older IEs... including 7)

try this instead:

http://jsfiddle.net/mtwDX/

tags are inline but with white-space:nowrap; and a proper line-height set

hope this helps

Answer 3

I'm not sure that I completely understand your question but there are different ways to achieve this "tag" effect.

You could set the div's to float:left, clear:left and give it a little padding (5px on all sides). Then put all of your tags in a fixed-width container and they should tile themselves horizontally until they run out of room, at which point they will wrap down to the next "line" below.

An even simpler way is to just use inline elements, such as anchor tags, which are being used on this site (stackoverflow). The elements naturally flow horizontally until they run out of room and then wrap. If you inspect them you'll see there is not much to their styles. And they are behaving the way an inline element is expected to behave.

Sometimes the solution is simpler than you think. You might not need to bother with div's or floating. But without more information it's hard to say exactly what will work for you.