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

Question

我用Lightbox 2照片库创建了一个网站。不知怎的，它显示了一个＆＃34; _＆＃34;每个缩略图图像之间的（下划线）。图像查看器本身就很完美。缩略图下划线虽然困扰着我。

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

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