删除最后一行li边框

Question

我需要删除最后一行li的边框底部。 如下图像示例

提前谢谢你：）

jsfiddle.net/foLacgg3/1

Answer 1

查看我在第一次回答后发布的代码段：

• 看来你要么每行有三个或四个元素，两个选项之间的断点大约为740像素。
• 看起来网格中有9个列表元素。
• 如果您不知道li元素的数量 - 那么如果您可以使用SASS而不是CSS，我可以帮助您。

因此，假设您知道li元素的数量 - 假设您的代码是这样的：

    @media only screen and (max-width:740px) { 
ul.menu li:nth-child(n+7) { border:none;}

}

对于其他屏幕尺寸：

@media only screen and (min-width:740px) { 
  ul.menu li:last-child {border:none;}
}

Answer 2

如果您不想重写代码，可以使用伪元素，并为其提供页面背景（这样只会隐藏ul中任何最后元素的边框）

ul {
   list-style: none;
   padding-left: 0;
   display: block;
   position: relative;
   overflow: hidden;
}
ul:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #F3F5F6;
  /*(page background)*/
  width: 100%;
}

https://jsfiddle.net/foLacgg3/2/