li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}Cross Browser Inline-Block
Chris Coyier
on
Thank you
Inline-block come in really handy for form layouts (applied to labels, inputs, error spans). Works brilliantly in IE6+, Mozilla 3.6+, Safari, Chrome, etc.
This is very useful hack! It’s much better than floating li items. Thank you.
If you want to avoid nasty CSS hacks and don’t care about IE6 (which you shouldn’t), you can ensure proper inline-block handling in all browsers if you use a tag that has a default display of inline (other than the <p> tag).
So tags such as <span>, <b>, <s>, <q>, <u>, <i>, or <a> work perfectly in all browsers if you apply display:inline-block to them.
I recommend <span> because it’s semantically similar to <div>.
Just remember that whitespace between inline-blocks is rendered just like it is between text.
Click here to see a demo and test it in various browsers.
The is a block-level element by default, but good comment otherwise.
Darnit, HTML disabled. The *paragraph tag* is block-level by default.
That would be true except for Firefox 2 which is why the -moz-inline-stack is included
I gotta say, your site is very useful, I end up here frequently, also the css frog rules.
Not ready to share my site yet, perhaps when It’s a little more finished!
Hi there, any known issues with inline-block with Chrome, look at this weird behaviour I have found at the new beta version of WordPress 2012 – http://wordpress.org/support/topic/twentytwelve-nav?replies=17
Any suggestions or ideas anyone ?
want this with divs
I’ve ended up adding
white-space: nowrap;to my inline-block mixin to fix a issue I was having in Chrome on Android with some<li>breaking onto another line for no apparent reasonWhat does mean by display:inline means what does means of “” to put before any property
Thanks
Considering it’s September 2014, is it reasonable to simply do: “display: inline-block;” if you aren’t required to support older browsers?
Hi,
I have a problem the inline-block in Chrome and Opera.
There is the source code: A link.
There is worked in Chrome and Opera, oddly working in Firefox, it works perfectly in Microsoft Edge in Windows 10, not working Safari. Why now not Working Chrome and Opera? If I overwrite inline-block to block than this working Chrome and Opera, but oddly.
Thank you very much!
There is a link hover effect (3D rotate)
Sorry about the previous code!
Here is the link
http://codepen.io/anon/pen/pjpGBx
In modern versions of Mozilla display: -moz-inline-stack causes text collapsing in a div, if the code is e.g.:
<div>img</div> <div>h1 text text</div>And the browser doesn’t recognise paddings in that second div as well.
Beware of that!
Thanks, nice tips