How to display <div> inline surrounded with text?

问题

I would like to display a <div> element inline so that it is surrounded with text.

My code is:

<span>Here is some <div class="a"></div> text</span>

Let's say, the class "a" is defined as below:

.a {
    width:20px;
    height:20px;
    background-color:#f00;
}

The result should be like this:

Is it doable? Thank you for any suggestions.

回答1:

There's a CSS property display: inline-block; but I don't know how compatible with browsers it is (works fine in my FF)

I'll do some quick testing for you.

Update

I've tested it in Chrome, FF and IE. Works in IE8, not IE7. Chrome is fine as is FF

回答2:

Basically just add display: inline-block; You might want to tune it a bit afterward, but this should work everywhere except IE6

来源：https://stackoverflow.com/questions/4256272/how-to-display-div-inline-surrounded-with-text