ブログ

サムネイルを表示させる際、左右を横幅いっぱいいっぱいで表示させたい時。
通常、左右にマージンを入れてしまうと、どうしても左右が空いてしまう。
そんな時はサムネイルの右だけにマージンを設定し、一番右端は敢てはみ出させ、はみ出た部分を非表示にしてしまう。
あとは: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;
}