display:inline-blockで要素を並べると余計な隙間ができてしまうので、
簡単に隙間をなくす方法を紹介します。
親要素にfont-size:0;を指定する
横並びにしたい<li>タグを1行で書いたり、letter-spacingを調整したりなど、
いくつかの解決方法がありましたがこの方法が一番楽でした。
display:inline-blockの隙間問題はテキストの改行が原因で起こるので、
inline-blockを使った要素の**親要素にfont-size:0;**を指定すると改善されます。
html
<ul class="wrap">
<li class="inline-block">
テキストテキストテキストテキスト
</li>
<li class="inline-block">
テキストテキストテキストテキスト
</li>
<li class="inline-block">
テキストテキストテキストテキスト
</li>
</ul>
css
.wrap{
font-size:0;
}
.inline-block{
display:inline-block;
font-size:12px; /* フォントサイズ0になっているので指定する */
}
このやり方だと、横並びにした<li>の幅を%指定していても調整がややこしくないしシンプルなのでお勧めです。
※ただしfont-sizeを%指定したい場合は他の方法を推奨します（下記、参照サイトに他の解決方法が紹介されています）
※ 追記
font-size:0;だとfontを%指定した時にややこしいので、
letter-spacingで文字間を詰めて隙間をなくした方が良さそうです。
css
.list { /* 親要素 */
letter-spacing: -.4em; /* 文字間を詰めて隙間をなくす */
}
.list li { /* 子要素 */
display: inline-block;
letter-spacing: normal; /* 文字間を元に戻す */
}