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

我有一个通常包含约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;
}

编辑
添加了截图以供参考

最佳答案

您可能正在寻找负利润，然后

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

边距bottom：-1px将底部div放在上方1px，右边距为4px，因为每个li + 1px之间有一个空格

这样做时要特别小心，因为4px仅是具有特定字体大小的1em的宽度，因此最好说-1em -1px而不是-5px

codepen version here。

关于html - 如何删除没有空格的堆叠式列表项上的双边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45997501/