質問: CSSのリストで幅いっぱいに等間隔で画像を配置 幅700pxに4枚の画像(165px)を均等に配置したいです。 imgに padding:10px 5px 10px 5px; で設定すると幅700pxぴったりにはならないですよね(左右5px分センタリングしてしまう) これをどうにかして綺麗に左右を揃える事は出来ないでしょうか?
回答: 700 - ( 165 × 4 ) = 40 なので、余白として利用できる分が合計40px 外枠 余白1 画像1 余白2 画像2 余白3 画像3 余白4 画像4 余白5 外枠 画像を4枚で余白が5箇所なので、40 ÷ 5 = 8 余白1箇所に8px分割り当てると丁度良くなります。 外枠となる要素の内側余白を0pxでリセットしておき、外側余白を画像の左側だけに8px指定、最後の画像だけ両側に8pxずつとなるように指定すると良さそうです。 ``` /* 対象のimgにclass="test-img" を指定している場合 */ .test-img { margin-left: 8px; } .test-img:nth-child(4) { margin-right: 8px; } ```