的確なタイトルが浮かばなかったんですが、一つの要素、例えばリストなどで常に日付が先頭に表示され、その後タイトルが続く場合や、リストのマークとは意味合いが違う場合などに複数行になった場合、
日付の下にタイトルが来て欲しくない、列を揃えてくれと言ったことが有ると思います。
うまく説明できないので、実際の感じだと下記のような。
- ※ ああああああああああああああああああああああああ
- ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ※ ああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
↑こんな感じで、複数行になった場合二行目が日付の下に来てしまいます。
コレを回避する為に、わざわざspanやらで要素を増やしたくない。
そんな場合のチョットしたテクニック。
- ※ ああああああああああああああああああああああああ
- ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- ※ ああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
↑そろってますよね？
応急処置的な方法でもあるので、文字サイズを変更した場合2行目からちょっとズレちゃうんで、そこさえ回避出来ればかなり優秀なんですが...
スタイルは下記のようになります。
li {
text-indent: -1.7em;
margin-left: 1.4em;
}
text-indentで、一行目を左にずらして、全体をmargin-leftで右にずらす。
marginは当然その要素内全体ですが、text-indentは1行目にしか適用されないので、ソレを利用してます。
コレ実際の案件であって、一度組み終わった後の修正で、さらにその修正する数が恐ろしい事になってたので、どうしたらいいんだ...とマジで悩んでました。
そんな時、ふと考え付いて試したら結構上手く行ったので、スタイルちょっといぢっただけで全ての修正が完了し助かったのを覚えています。