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;
}

修改添加了referance的截图

Answer 1

你可能正在寻找负利润

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

保证金底部：-1px将底部div设为1px，右边距为4px，因为每个li + 1px之间有一个空格用于保证金

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

codepen version here

Answer 2

希望这有帮助

使用flex

删除图片的边框并设置ul和li

的边框

.search-filter{
    &__brand{
        li{
        padding: 0;
        height: 62px;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        }
        img{
            width: 100px;
        }
    }
}
ul.list-inline.search-filter__brand {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid black;
    border-top: 1px solid black;
    overflow: hidden;
}

DEMO

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

2 个答案: