li要素の折り返したテキストを揃える

CSS

li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

またどこかで使いそうな感じがしたので記録として残しておきます。ulのlist-style-positionにinsideを指定した状態で、li要素のテキストを折り返すと頭文字が上手く揃いません。なのでこれを綺麗に揃えて上げるCSSのやり方です。

やり方

やり方

li要素に、padding-leftで1emのスペースを作り、text-indentで最初の文字を-1em引っ込ませます。

ul {
    list-style-position: inside;
}
ul li {
    padding-left: 1em;
    text-indent: -1em;
}

そうすると、このように綺麗に揃えることができます。

揃った

やり方としては至って単純ですが、覚えていないと変に無駄な時間を取られてしまうかもしれないので忘れないようにしたいですね。

Tosrusスマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」前のページ

Nexus 5でテザリングしてMacを接続させるやり方次のページNexus 5でテザリングしてMacを接続

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP