レスポンシブサイト作成時に、displayinline-blockで要素を横並びにした時にwidth値とmargin値をピッタリ100％にすると、最後のリストが段落ちしてしまう時の対処法。

要素の検証で調べると、＜li＞と＜li＞の間に謎の空白が…

【回避法01】＜/li＞の空白を消す

この方法はマークアップがべらぼうに見づらくなるので、あまり好みではない。

<ul class="list01">
  <li>BOX01</li><li>BOX02</li><li>BOX03</li><li>BOX04</li>
</ul>

【回避法02】フォントサイズを調整する

＜li＞を囲む＜ul＞をまず「font-size: 0;」にして、＜li＞でフォントサイズを指定する方法。こっちのほうが現実的。＜li＞でフォントサイズを指定しないと＜li＞内のテキストが消えてしまうので注意。

ul{
  font-size: 0;
}
ul  li{
  font-size: 16px;
}

DEMO