ブログ

サムネイルを並べた時に左右のマージンをなくす方法

2012.12.07

サムネイルを表示させる際、左右を横幅いっぱいいっぱいで表示させたい時。
通常、左右にマージンを入れてしまうと、どうしても左右が空いてしまう。
そんな時はサムネイルの右だけにマージンを設定し、一番右端は敢てはみ出させ、はみ出た部分を非表示にしてしまう。
あとは:after擬似要素を使うところがポイント!
:after擬似要素とは「要素の直後に内容を挿入する際に使用する。」とある。
逆に今回のパターンは、ケツには何も入れさせないよってことなんだろう。
まぁ、難しく考えずにこのパターンで設定すれば、左右ぴったりになるよと…。

#thumb {
width: 534px;
margin-right: auto;
margin-left: auto;
text-align: center;
overflow: hidden;
}
#thumb ul {
list-style-type: none;
padding: 0px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
width: 560px;
float: left;
}
#thumb ul:after {
display: block;
clear: both;
content: "";
}
#thumb ul li {
float: left;
width: 120px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
}
Mac・PC・ガジェット

Archive

Category

Recent Entry


042-783-3557
平日9:00〜19:00

フォームからの
お問い合わせ

LINEでの
お問い合わせ
電話
LINE友達登録
ページTOPヘ