これ、何故にいままで全く思いつかなかったのかが不思議でならない。
たとえば以下のような配置をしたくなる時があります
上記画像は、横幅380pxの親ブロックの中に、横幅120pxのサムネイル画像を均等配置で3個入れてあります。
のでサムネイル毎の間隔は10pxかな。
そしてそれをコーディングする時、いままではこんな感じで書いてたとします
html部分
1 2 3 4 5 6 7 8 9 10 | <dl> <dt><img src="メイン画像までのパス"alt="メイン画像" /></dt> <dd> <ul> <li><img src="サムネイルまでのパス"alt="サムネイル" /></li> <li><img src="サムネイルまでのパス"alt="サムネイル" /></li> <li class="last"><img src="サムネイルまでのパス"alt="サムネイル" /></li> </ul> </dd> </dl> |
css部分（余計な指定はすでにリセットしてあるとして）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | dl{ width:380px; } dt{ margin-bottom:10px; } li{ float:left; display:inline; margin-right:10px; } li.last{ margin-right:0; } |
こんな感じで、liの最後に適当なclassをつけてmarginをリセットしてたんですよ。
これだと余計なclassをhtmlに書かなきゃならなくて、美しくないし面倒だなぁと思いながらも。
しかしさっきおや？と思ったわけです
右にmarginをとっていたけど、これ左にしたらどうだろう？と発想を変えてcssを
1 2 3 4 5 6 7 8 | ul{ margin-left:-10px; } li{ float:left; display:inline; margin-left:10px; } |
こうしてみたら
.lastが必要なくなったアアアア
って話。
One thought on “横並びにしたリストを（手動だけど）簡単に均等配置ぽく見せる”