css - Inline-Block vs. Float - 幅が違う?

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%;
}

私の問題

私が使用するとdisplay: inline-block;、<li>要素は、使用した場合よりも幅が広いかのように動作しますfloat: left;。幅を 20% (100% / 5) に設定していますが、幅<li>が広すぎるかのように最後の行が次の行に強制されます...float: left;の代わりに使用するとdisplay: inline-block;、5 つの<li>要素が期待どおりに収まります (幅は同じです)。 ...

jsFiddle: インライン ブロックとフロート

<ul>親を要素の高さに拡張するためにclearfixを使用する必要がないという事実のために、インラインブロックを使用したい<li>...使用する適切な方法を見つけることができれば、floatを使用することにするかもしれませんこの状況ではclearfix ...とにかく、インラインブロックの幅が広すぎる理由を知りたいのですが...<li>幅が20％で、内部のコンテンツがそうでない限り、これらの要素は1行に5幅に収まる必要があります広すぎます...

私のものに似ている唯一の質問はこれです（これは私を助けませんでした）：css inline-block vs float