5

HTML

<ul>
  <li><a href="#">Item #1</a></li>
  <li><a href="#">Item #2</a></li>
  <li><a href="#">Item #3</a></li>
  <li><a href="#">Item #4</a></li>
  <li><a href="#">Item #5</a></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 20%;
}

My Problem

When I use display: inline-block; my <li> elements are acting as if they were wider than if I use float: left;. I have their width set to 20% (100% / 5) but the last <li> is forced to the next line as if the are too wide... When I use float: left; instead of display: inline-block;, the five <li> elements fit as expected (with the same width)...

jsFiddle: Inline-Block vs. Float

I want to use inline-block due to the fact I don't need to use a clearfix to make the parent <ul> expand to the height of the <li> elements... I may decide to use float if I could find the proper way to use a clearfix in this circumstance... Regardless, I would still like to know why inline-block widths are too wide... These <li> elements should fit five-wide on one line as long as the width is 20% and the content inside is not too wide...

The only question I could find that is similar to mine is this one (which didn't help me): css inline-block vs float

Community
  • 1
  • 1
Derek Foulk
  • 1,892
  • 1
  • 19
  • 37
  • there is a strange 1% difference that I have noticed, so if you have one div set as 50% and another 50% they should fit inside perfectly, not so. 49% and 49% works. Not sure exactly, even if you check padding and margins it still exists. – Cam Oct 22 '13 at 23:44
  • This is interesting: http://jsfiddle.net/W7rar/2/ – Stuart Kershaw Oct 22 '13 at 23:52
  • FYI, you can set `font-size` to `0` on the `
      `, then set the original `font-size` on the child `
    • ` elements...
     – Derek Foulk Mar 01 '16 at 18:30

1 Answers1

9

It's simple. If you add a background: red to your li rules you will see that there is a small gap between each li. The gap is not a margin or padding but a whitespace character (a space) which is created when the browser 'collapses' your newlines and tabs. The issue here is your inline elements respect whitespace but floated elements do not.

There are several solutions based on your requirements and how 'hacky' you want to get. You can see them here: Ignore whitespace in HTML

Personally I'd use display:table-cell for my li as it enjoys the best browser support and is the least hacky approach 

ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}

An equally valid (but less readable) solution would be the remove the whitespace from the source like so:

<ul><li><a href="#">Item #1</a></li><li><a href="#">Item #2</a></li></ul>

This will work in any browser, even IE4. Some people do this with comments to hide the whitespace but I think that's an abuse of comment semantics and still looks ugly in the source anyway.

Community
  • 1
  • 1
SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • That is so crazy. I have never come across this. Thank you for the simple, but completely valid answer! I was always assuming the whitespace was ignored. – Derek Foulk Oct 23 '13 at 22:38