css中列表中上下border叠加的问题

代码:

58.jpg

此时的效果是:

59.jpg

解决办法:

60.jpg

此时的效果是:

61.jpg

常见的场景应用:

62.jpg

代码:

<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

63.jpg

如果没有margin-top:-1px;此时的效果就是这样子的:

64.jpg

也可以使用margin-top来解决:

65.jpg



总结:

1 margin-top为负值的使用

2 margin-bottom为负值的使用

猜你喜欢

转载自blog.51cto.com/11871779/2401560