匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

CSSのリストで幅いっぱいに等間隔で画像を配置


幅700pxに4枚の画像(165px)を均等に配置したいです。
imgに
padding:10px 5px 10px 5px;
で設定すると幅700pxぴったりにはならないですよね(左右5px分センタリングしてしまう)
これをどうにかして綺麗に左右を揃える事は出来ないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/11/21 17:29:54
  • 終了:2013/11/28 17:30:03

回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/11/21 21:19:52

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません