横並びにしたリスト（list）で自動的に入ってしまう隙間をなくす方法

listをdisplay: inline-block;で横並びにしたときに自動的に入ってしまう隙間をなくす3つの方法をメモ。
通常、listはこのように記述すると思いますが、これだと横並びにしたときに謎の空白が入ってしまいます。

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

そんな時は、下記のいずれかの方法で隙間が入らなくなります。

1,改行しないで記述

<ul>
<li>text</li><li>text</li><li>text</li><li>text</li><li>text</li>
</ul>

2,改行ごとにコメントアウトを入れる

<ul>
  <li>text</li><!--
  --><li>text</li><!--
  --><li>text</li><!--
  --><li>text</li><!--
  --><li>text</li>
</ul>

3,display:table;で横並びにする

cssで、display: inline-block;の代わりにdisplay:table;を使っても隙間なく並べることができます。

li {
  display:table;
}

4,liにfloatをかける

cssで、liにfloat:left;またはfloat:right;ををかけることで空白が入らずに横並びにすることができます。