CSS显示属性参数

Question

我有一个容器盒子，里面有许多缩略图。我之前把所有的拇指都做了一个div，但是效率不高。我现在将所有不同的拇指都包含在标签中，并将它们包含在同一个类中。

在我拥有的class属性中：

.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保持整洁。

Answer 2

与使用div包含拇指相比，使用列表更具语义性：

<ul class="thumbs">
   <li><a href="#"><img src="img0-thumb0.jpg" /></a>
   <li><a href="#"><img src="img1-thumb1.jpg" /></a>
   <li><a href="#"><img src="img2-thumb2.jpg" /></a>
   <li><a href="#"><img src="img3-thumb3.jpg" /></a>
</ul>

那么你不需要在列表中的每个锚点和每个图像上都有类，因为你可以像这样将它们作为目标：

ul.thumbs li a {
   /* anchor styles here */
}
ul.thumbs li a img {
   /* image styles here */
}

Answer 3

抱歉，各位。这太愚蠢了。我的身体里有text-align: center;