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. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  2. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  3. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  4. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  5. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  6. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP