しーぼーデザイン since 2003

blog ブログ

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

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

関連記事

Archive

Category

Recent Entry