大阪府堺市のWEB制作(ホームページ制作)事務所です

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

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

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

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

そんな時の解決法を!




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

結論から言いますと

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

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

たとえば、


  • *あいうえお
    あいうえお

こういったコードだと、

  • *あいうえお
    あいうえお

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

そこで


  • *あいうえお
    あいうえお
  • *あいうえお
    あいうえお

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

ちなみに1emとは??

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

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

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


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA