Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Untitled
body {
font-family: sans-serif;
}
ul {
list-style: none
}
li {
background: slategrey;
display: inline-block;
/* inline block hack for IE 6&7 */
zoom: 1;
*display: inline;
padding: 4px;
color: white
}
ul.white-space-fix li {
margin-right: -4px;
}
ul.zero-size {
font-size: 0px;
}
ul.zero-size li {
font-size: 16px;
}
<h1>Inline-block / white-space bug</h1>
original...
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
fixed by funky code formatting...
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
fixed by adding html comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
fixed by CSS margin-right: -4px; (breaks in IE6&7)...
<ul class="white-space-fix">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
fixed by omitting the &lt;/li&gt;
<ul>
<li>one
<li>two
<li>three
</ul>
fixed with font-size: 0 via: http://twitter.com/#!/garand/status/183253526313566208
<br><br>
<ul class="zero-size">
<li>one</li>
<li>two</li>
<li>three</li>/
<ul>
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.