利用负margin-bottom去除列表最后一个li元素的border-bottom

负margin-bottom不会影响元素的实际大小，只会使得后面的元素上移

以第二个里为例，由于第一个li的margin-bottom导致第二个li被上拉1px，第二个li最上面的1px高度覆盖在第一个li之上，但由于background-color：transparent，第一个元素的boder-bottom能够正常显示出来

由于最后一个li -1px的margin-bottom，ul的下部分向上移动1px覆盖在ul的border-bottom之上

适当调大border宽度，便可以看出来，li的灰色border覆盖在ul的黑色border之上，要利用margin-bottom来实现去除最后一个li的

border效果，必须保证二者颜色相近，或者给ul写个overflow：hidden

 

HTML

1 <ul id="test">
2     <li>Test</li>
3     <li>Test</li>
4     <li>Test</li>
5     <li>Test</li>
6     <li>Test</li>
7 </ul>

 

CSS

 body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }

 

转载于:https://www.cnblogs.com/NickCarter/p/6835153.html