Created 2011 October 10
While reading Russ Weakley's article Inline elements and padding (maxdesign.com.au) I recalled a technique that used line-heights in a cool way; another string to bow hopefully. It went something like:
ul.inline {
line-height:2.3em;
word-spacing:-1em;
list-style-type:none;
}
ul.inline li {
line-height:1.3em;
word-spacing:normal;
display:inline;
zoom:1;
padding:0.5em;
background:#dee;
border:1px solid #f00;
}
The ul line-height provides enough breathing space for the padded lis when they wrap around. Where ul line-height ≈ li line-height + li padding-top and bottom.
The word-spacing is there to remove the space between list-item elements. The white-space appears because the list-items are inline; white-space counts as it does between words. Removing the space in the HTML is better but not always an option. And zoom is there to nudge IE 6.
Can't remember where the technique came from or if it's as bullet-proof as floats but am sharing on the off-chance it's useful.
The above may seem a bit old-school considering that inline-block is perfect for this purpose. A difference in rendering makes it worth showing the above technique with this one.
ul.inline-block {
word-spacing:-1em;
list-style-type:none;
}
ul.inline-block li {
word-spacing:normal;
display:inline-block;
padding:0.5em;
background:#dee;
border:1px solid #f00;
}
<!--[if lte IE 7]>
<style>
ul.inline-block li {
display:inline;
}
</style>
<![endif]-->
For inline-block to work in IE lte 7 we need to target those browsers. Conditional Comments (quirksmode.org) are used here out of preference, but there are other ways to do the same.
For inline-block compatibility see CSS2 - The display declaration (quirksmode.org) by PPK.