![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zM0OHoxmu345bl2RaZNJKODTboz0yXWz17pt4DAdr5NZxfa15jX4g39Q34lbZ3Qm_fBkR8Anv0QZ4SZRjyNyklxS6X6c_WoeMOprt-_YNmb8YU_mEmQMphZBbiKJOxJCf6Tmn_9Q0nuL/s1600/SnapCrab_li+%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AE+inline-block+%25E5%258C%2596+-+Google+Chrome_2017-2-16_13-42-55_No-00.png)
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 要素のレイアウトを指定します。