CSS リストを横並びにする

html 例

  <ul class="menu">
    <li>index</li>
    <li>images</li>
    <li>movies</li>
    <li>maps</li>
  </ul>

css

ul.menu {
  list-style: none;
}

ul.menu li {
  display: inline-block;
}

以前は float でブロック要素を並べていたけど、いまは inline-block
古いブラウザではうまくいかないかもしれないので注意

li 要素と li 要素の間に改行コードがあるので隙間ができる
この隙間を解消する方法もいろいろあるらしい