Menu
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.
817
Users can see that all div elements inside the parent div are displaying inline. Approach 2: In this approach, we will apply display: inline-block property to all the div which we need to display inline. The display:inline-block property will set the all div elements side by side.
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs which needs to be aligned horizontally and place them in some container div.
You can change the visual presentation of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa.
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
146
Basically just add display: inline-block;
You might want to tune it a bit afterward, but this should work everywhere except IE6
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
