[CSS]リストの頭を簡単に揃える方法

最終更新日：2022.05.23 [月]　公開日：2018.05.20 [日]　カテゴリー：html・CSS・jQuery・JS備忘

リストって１行で終わるものであれば、そんなに悩むことはないのですが、２行以上になると・・・
頭が揃わないことありませんか？

普通に「・」だけでいけるなら、list-style-typeで解決するので、２行目以降も頭揃えることは可能かもしれませんが、●とか、＊とか、※とかを使ってのことも多いですよね。

そんな時の解決法を！

Contents

padding-leftとtext-indentの合わせ技で解決

結論から言いますと

padding-left:1em;
text-indent:-1em;

この２行を追加することで解決できるのです。

たとえば、



＊あいうえお
あいうえお

こういったコードだと、

こんな風に表示されて頭揃わず気持ち悪い！！

そこで



＊あいうえお
あいうえお

これだとこう言う風にきちんと頭が揃うのです！
なんという便利さでしょう！！

1em=１文字分の長さなのです。
つまり、こういうことですね。

全体を1em（１文字分）左に余白を持ちつつ、
１行目だけ-1em指定で１em分、左に寄せて飛び出させる。
これにて頭を揃えてる感じです！！！

すっごく便利で、すっごく重宝して使う方法です！

コメントを投稿するにはログインしてください。