display: inline-blockが横並びにならない
現象
リストで親要素の幅を固定値（500px）、子のli要素の幅はパーセンテージ（20%と80%）で指定。横並びとしたかったためinline-blockとした。
これで2:8で横並びになるはず…
<ul style="width: 500px; background: orange;"> <li style="display: inline-block; width: 20%; background: red;">red</li> <li style="display: inline-block; width: 80%; background: blue;">blue</li> </ul>
けど横並びにならなかった…（そして色がドギツい）
原因と対応
どうやら改行を半角スペースとして認識してしまうために、隙間ができてしまい、横並びにならないらしい。初めて知った…
なので「改行をなくす」のが一番簡単なのかも。
改行を消して、無事に横並びにすることができた。
