項目を等幅で並べたいときに、display: inline-blockにしちゃって、幅を％指定するのはよくやると思います。
ただそこには落とし穴があって・・・。
- width: 50%にしたのに横並びにならない
- marginもpaddingもborderもないのに並ばない！
- 49%にすると並ぶ・・
みたいな事態に遭遇したことはありませんか？
もう悩まない！
犯人は改行と空白文字
以下、実際に見てみてください。
横並びにしたい要素（この場合はboxクラスのついたdiv）は、改行もスペースも入れずに記述する必要があるみたいです。
どうすれば
やりかたはいくつかありますが、よくやるのはコレかな？
<ul><!-- --><li>このように</li><!-- --><li>タグとタグの間を</li><!-- --><li>コメントとして亡き者にする</li><!-- --></ul>
もちろん、
<ul><li>そもそも</li><li>改行も空白も</li><li>入る余地をなくす</li></ul>
とかでもよいです。
閉じタグを省略したりするテクもあるみたい。