灯箱在每个图像之间显示下划线

Question

我用Lightbox 2照片库制作了一个网站。 不知何故，它在每个缩略图图像之间显示“_”（下划线）。 图像查看器本身就很完美。 缩略图下划线虽然困扰着我。

有没有办法删除下划线？ 正如您所看到的，代码中没有下划线。

<a href="images/swan.jpg" data-lightbox="animals">
    <img height=183 width=183 src="images/swan.jpg">
</a>
<a href="images/bee.jpg" data-lightbox="animals">
    <img height=183 width=183 src="images/bee.jpg">
</a>
<a href="images/deer.jpg" data-lightbox="animals">
    <img height=183 width=183 src="images/deer.jpg">
</a>
<a href="images/frog.jpg" data-lightbox="animals">
    <img height=183 width=183 src="images/frog.jpg">
</a>

Answer 1

下划线是一个或多个带下划线的空格字符。 采用：

a{
text-decoration:none;
}

Answer 2

您还可以删除元素之间的空间并添加边距。

.thumbs a {
    display: inline-block;        
}
.thumbs {
    font-size: 0;
}

.thumbs a {
    margin-right: 20px;
}

参见示例 - https://jsfiddle.net/52psj7tz/1/

Answer 3

这可能是由于css样式应用于某些父css类的标记。 因此，只需在css中为由Lightbox生成的标记添加一个类或样式，该标记将覆盖应用于它的样式。 这个css属性将删除下划线：`text-decoration：none;'。

 .lightbox a{ text-decoration: none !important; } 

 <div class="lightbox"> <a href="images/swan.jpg" data-lightbox="animals"> <img height=183 width=183 src="images/swan.jpg"> </a> <a href="images/bee.jpg" data-lightbox="animals"> <img height=183 width=183 src="images/bee.jpg"> </a> <a href="images/deer.jpg" data-lightbox="animals"> <img height=183 width=183 src="images/deer.jpg"> </a> <a href="images/frog.jpg" data-lightbox="animals"> <img height=183 width=183 src="images/frog.jpg"> </a> </div>