Inline-Block vs. Float - Different Width?

Question

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 elements <li>act as if they were wider than if I used float: left;. My width is set to 20% (100% / 5), but the last one <li>forcibly moves to the next line, as if they were too wide ... When I use float: left;instead display: inline-block;, five <li>elements correspond to the expectation (with the same width). ..

jsFiddle: Inline-Block vs. Float

- , clearfix, <ul> <li>... float if clearfix ... , , ... <li> 20%, ...

, , , - ( ): css inline-block vs float

Answer 1

. background: red li, , li . , (), , "" . , , .

, "" . : HTML

display:table-cell li,

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

( ) :

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

, IE4. , , , .