ul网格没有特定的边框

Question

我想在不使用特定类的情况下删除与以下附加图像中所示相同的边角，因为此网格在运行时根据数据生成列数。请指导我如何实现这一目标？

Fiddle

HTML:
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS：

ul{list-style:none; width:260px;}
ul li{
    display:block;
    width:50px;
    height:50px;
    border:1px solid black;
    float:left;
    margin-left:-1px;
    margin-top:-1px;
}

Answer 1

您可以放弃border-bottom和border-right。在ul上重置padding并将overflow设置为hidden： DEMO

如果您愿意，也可以调整盒子模型，但不必看到它 working

---

and if i remove an li ?

---

does ul width matters ?

Answer 2

使用以下CSS（针对此特定上下文）

     ul{ list-style: none; width: 260px; }
     ul li{
        display: block;
        width: 50px;
        height: 50px;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        float: left;
     }

     ul li:nth-child(5n){
        border-right: none;;
     }

     ul li:nth-child(n + 21){ border-bottom: none; }

你不需要负边距黑客来隐藏重叠边框