html - 如何删除没有空格的堆叠列表项上的双边框

Question

我有一个列表，通常包含大约 30 张图像，我在图像本身上有 border: 1px solid #222;。我遇到的问题是，每当我的列表出现在多行时，边框就会堆叠在一起，使某些边框看起来比其他边框大。

有没有办法在我的所有图像周围显示真正的 1px 边框，而不管它们位于哪一行？

这是一个Codepen显示我的问题以及下面的代码

HTML

<ul class="list-inline search-filter__brand"><li><a><img src="//img.alicdn.com/bao/uploaded/TB1GAvUKVXXXXa0XpXXSutbFXXX.jpg_100x100.jpg" alt="Nike/耐克"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg_100x100.jpg" alt="Adidas/阿迪达斯"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1z3wlKVXXXXXvXpXXSutbFXXX.jpg_100x100.jpg" alt="Lining/李宁"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1IvS5KVXXXXaaXVXXSutbFXXX.jpg_100x100.jpg" alt="Asics/亚瑟士"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1EQfUHpXXXXXDXpXXSutbFXXX.jpg_100x100.jpg" alt="ANTA/安踏"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB178.CHpXXXXbTapXXSutbFXXX.jpg_100x100.jpg" alt="NEW BALANCE"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1QLG5QFXXXXaAaFXXSutbFXXX.jpg_100x100.jpg" alt="Under Armour/安德玛"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1sGfkHFXXXXc4XVXXSutbFXXX.jpg_100x100.jpg" alt="Mizuno/美津浓"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1xttsSpXXXXcKXVXXXXXXXXXX_100x100.jpg" alt="Puma/彪马"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1ekhSJpXXXXbzXVXXSutbFXXX.jpg_100x100.jpg" alt="XTEP/特步"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1tBlBMXXXXXXaXFXXSutbFXXX.jpg_100x100.jpg" alt="Skechers/斯凯奇"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1gmTGQFXXXXccXFXXSutbFXXX.jpg_100x100.jpg" alt="Reebok/锐步"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1CbHlSpXXXXaYaXXXXXXXXXXX_100x100.jpg" alt="361°"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1RwT3HpXXXXbaXVXXSutbFXXX.jpg_100x100.jpg" alt="乔丹"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1MpgaHpXXXXXBXXXXSutbFXXX.jpg_100x100.jpg" alt="Peak/匹克"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1zS.5JFXXXXaFXpXXSutbFXXX.jpg_100x100.jpg" alt="erke/鸿星尔克"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1RKW3IXXXXXXYXpXXSutbFXXX.jpg_100x100.jpg" alt="Fila/斐乐"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1GrllRpXXXXbdXVXXXXXXXXXX_100x100.jpg" alt="Saucony/圣康尼"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1zPMqKFXXXXbdaXXXSutbFXXX.jpg_100x100.jpg" alt="Decathlon/迪卡侬"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1QDzSHpXXXXatXpXXSutbFXXX.jpg_100x100.jpg" alt="Le coq sportif/公鸡"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB145DUSFXXXXX1XpXXXXXXXXXX_100x100.jpg" alt="Warrior/回力"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1PhHOKXXXXXccXFXXSutbFXXX.jpg_100x100.jpg" alt="PLAYBOY/花花公子"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1dAMgIXXXXXcjXXXXSutbFXXX.jpg_100x100.jpg" alt="Camel/骆驼"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1g1NQQVXXXXaAXpXXSutbFXXX.jpg_100x100.jpg" alt="DOUBLE STAR/双星"></a></li><li><a><img src="//img.alicdn.com/bao/uploaded/TB1aZ2VHpXXXXcwXXXXSutbFXXX.jpg_100x100.jpg" alt="贵人鸟"></a></li>
</ul>

SCSS

.search-filter{
    &__brand{
        li{
            padding: 0;
            width:100px;
        }
        img{
            border: 1px solid #222;
            width: 100px;
        }
    }
}

CSS

.search-filter__brand li {
  padding: 0;
  width: 100px;
}
.search-filter__brand img {
  border: 1px solid #222;
  width: 100px;
}

编辑添加截图以供引用

Answer 1

你可能正在搜索负边距

li{
    padding: 0;
    width:100px;
    margin-right:-5px;
    margin-bottom:-1px;
}

margin bottom:-1px 将底部 div 向上放置 1px，右边距为 4px，因为每 li + 1px 之间有一个空格作为 margin

这样做时要小心，因为 4px 只是 1em 的宽度与您的特定字体大小，所以最好说 -1em -1px 而不是 -5px

codepen version here .