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

Question

我创建了一个无序列表，其中标记了我的缩略图。现在(正如 Firebug 告诉我的那样) anchor 标记与我的缩略图重叠，在我的图像下方形成白色条纹。到目前为止，这是我的代码:

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

在 .item img 上设置 display: block

参见 this answer