CSSを使ってulのliを横並びにするには、floatを使う方法、display: inline;を使う方法の2つがあります。どちらにも一長一短があり、作例（サンプルサイト）では、あえて、両方を使っています。
それぞれ次のような短所がありますので、短所を回避するために、逆の方法を使うといった使い分けるとよいかもしれません。
float : left;を使う場合、
- 親要素のulからli要素が浮いてしまうため、ulの背景色が切れてしまう。
- ul要素内で、（li要素をまとめて）センタリングができない。
display : inline;を使う場合
- （X）HTMLの改行が"余白"として生じてしまうことがある。
- 「ul li a」に対して、横幅を設定するためにdisplay:block;を設定すると、横並びが解除されてしまう。