Question

我创建了一个无序列表，其中标记了缩略图。现在（正如Firebug告诉我的那样）锚标签与我的缩略图重叠，在我的图像下创建了白色条纹。到目前为止，这是我的代码：

HTML：

    <div class="wrapper">
        <ul class="masonry">
           <li class="item">
              <a class=lightbox" href="1.jpeg">
                 <img alt="1.jpeg" src="thumb/1.jpeg">
              </a>
           </li>
        </ul>
    </div>

的CSS：

.wrapper{
  width:90%;
  margin: auto;
  padding: 20px;
}
.masonry {
  column-count: 4;
  -moz-column-count: 4;
  column-gap: 0.5em;
  -moz-column-gap: 0.5em;
  -webkit-column-gap: 0.5em;

}
.item{
  background: #eee;
  display: inline-block;
  width: 100%;
  margin: 0 0 0.5em
  box-sizing: border-box;
  moz-box-sizing: border-box;
  webkit-box-sizing: border-box;

}
.item a{
  margin: 0;

}
.item img{
  width: 100%;
  margin: 0;

}

Example

您可以在my homepage

上查看问题

Answer 1

在display: block

上设置.item img

请参阅this answer

Answer 2

将line-height: 0;添加到.item img。

白色条带来自字母下伸的空间 - 图像放在基线上，该空间可用，但line-height: 0;使其消失。

html锚点重叠缩略图/在图像下创建白色条纹

2 个答案: