li 要素を inline-block 化することで、li 要素を横並びにする方法について紹介します。text-align で li 要素の左・右・中央揃ができます。
HTML
補足
- inline-block 化したい ul 要素に "inline-block" クラスを付けます。
CSS
補足
- 単純に inline-block 化すると li 要素間にギャップができるので、ul 要素の font-size を一旦 0 にして、li 要素で再定義しています。
- 必要に応じで、text-align と vertical-align で li 要素のレイアウトを指定します。