Menu
Say I have the following code
<style type="text/css" media="all"> span, ul, ul li { display: inline-block; vertical-align: top; margin: 0; padding: 0; list-style: none; } </style> <span>i would want</span> <ul> <li>this</li> <li>on</li> <li>one line.</li> </ul> I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
230
If you have a <div> with text-align:center; , then any text inside it will be centered with respect to the width of that container element. inline-block elements are treated as text for this purpose, so they will also be centered.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
`margin:auto;` doesn't work on inline-block elements. Bookmark this question.
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The code you pasted works in IE8 with that doctype.
64
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
