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;
}

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

揃った

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

関連記事

  1. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  2. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  3. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  4. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  5. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  6. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

最近の記事

  1. Anker アルカリ乾電池
  2. スタンスミス(EDIFICE/IENA別注)
  3. WI-1000XM2
  4. mill オイルヒーター

アーカイブ

PAGE TOP