当前位置: 代码迷 >> 综合 >> 去除列表最后一个li元素的border-bottom
  详细解决方案

去除列表最后一个li元素的border-bottom

热度:30   发布时间:2023-12-05 23:59:48.0

方法一:给最后一个li单独设置一个类样式,重新设置border-bottom的属性值为none,或者使用margin-bottom设置负边距。

  .lastli{margin-bottom:-1px ;/*或者使用border-bottom: none;*/}

方法二:使用CSS3中的新增加选择器,选择最后一个li,不使用类样式,好处是当li的个数不确定时更加方便。

 ul li:last-child {margin-bottom:-1px ;/*或者使用border-bottom: none;*/
}

如果li的border-bottom颜色与ul的border颜色是一样的时候,在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题,给ul写个overflow:hidden;就可以解决这个问题。