Q：CSSを使ってulのliを横並びにするには、2つの方法があるのですか？

CSSを使ってulのliを横並びにするには、floatを使う方法、display: inline;を使う方法の2つがあります。どちらにも一長一短があり、作例（サンプルサイト）では、あえて、両方を使っています。

それぞれ次のような短所がありますので、短所を回避するために、逆の方法を使うといった使い分けるとよいかもしれません。

float : left;を使う場合、

• 親要素のulからli要素が浮いてしまうため、ulの背景色が切れてしまう。
• ul要素内で、（li要素をまとめて）センタリングができない。