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

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

下划线是一个或多个带下划线的space字符。使用：

a{
text-decoration:none;
}

Answer 2

这可能是由于 css 样式应用于某些父 css class 的标签。因此，只需为 Lightbox 生成的标签添加一个 class 或 css 中的样式，它会覆盖应用于它的样式。 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>

Answer 3

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

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

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

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

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

Lightbox displaying underscores between each image

html

javascript

jquery

lightbox2