CSS 显示属性参数

Question

我有一个包含许多缩略图的容器框。我早些时候用所有的拇指做了一个 div，但效率不高。我现在在标签中包含了所有差异缩略图，并将它们包含在同一个类中。

在类属性中我有:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;
}

.thumb {
    padding: 4px;
}
.thumb-img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);
}

html 是:

    <div class="thumb-wrap">
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>

        </div>

但是拇指出现在框的中心。我不想要那个。我希望它们保持对齐。请帮忙。

Answer 1

如果将它们包装在 div“thumb-wrap”中，则您也不需要链接上的“thumb”类或图像上的“thumb-img”类。

只需使用父关系:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;

 .thumb-wrap a {
    padding: 4px;

 .thumb-wrap img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);

这将使您的 HTML 更干净。