横並びCSSの組み方(float無し)

横並びCSSの組み方(float無し)

単純な横並び(折り返し無し)

パターン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の部分は分かり易く装飾しているだけで特には不要な部分です。

ホームページ制作の
お問い合わせ

Y desIgnのサービスは全国対応可!

全国
対応

遠方の企業様にLINEやzoomなどのビデオ会議ツールを活用させていただくことで日本全国のお客様へのサービス提供を可能としております。

ホームページを作りたいと
お伝えください

受付時間
平日火曜~金曜 10:00~17:00

0586-82-2196