横並びCSSの組み方(float無し)
2018.09.18 Tue
単純な横並び(折り返し無し)
パターン1
inline-blockを追加
ulのletter-spacing: -0.4em;でliの左右に空く余白を文字の間隔を詰めることで打ち消しています。
liのletter-spacing: normal;で詰めた文字の間隔をリセットしています。
inline-blockを追加 (幅指定・横方向の中央揃え)
パターン2
横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell
【注意】折り返しません。
横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell
色付けしてみました
【注意】折り返しません。
パターン3
横並びにする部分の親要素にdisplay: flex
li:beforeの部分は分かり易く装飾しているだけで特には不要な部分です。