问答详情
源自：10-1 编程挑战

增加border的宽度会多出一条线

#all{width:400px;overflow:hidden;font-size:14px;margin-top:5px;}

       #all ul{padding-left:10px;height:30px;}

       #all ul li{width:80px;border:1px solid #ccc;border-bottom:none;text-align:center;float:left;margin-right:10px;line-height:30px;cursor:pointer;}

       #all div{width:300px;height:150px;border:1px solid #000;line-height:28px;display:none;border-top:3px solid saddlebrown;padding:5px;}

       #all li.cur{border-top:3px solid saddlebrown;border-bottom:2px solid #fff}

       #all div.cur{display:block;}

http://img.mukewang.com/58a2db200001513302770202.jpg

提问者：慕粉4448690 2017-02-14 18:25

个回答

  • 慕粉0017343883
    2017-02-15 15:13:00

      #all div{width:300px;height:150px;border:1px solid #000;line-height:28px;display:none;border-top:3px solid saddlebrown;padding:5px;}

           #all li.cur{border-top:3px solid saddlebrown;border-bottom:2px solid #fff}

    。。。。2px不能覆盖3px，修改方式（将就一下~）：

    1、去除ul的height，并用   overflow: hidden清除浮动（你下面的li都是float）；
    2、给ul偏移下位置 position: relative;  top: 3px;
    3、#all li.cur 的border改为3px；

    0
  • 如果妳還記得我
    2017-02-15 14:15:40

    #all div.cur继承了#all.div的border-top属性，与#all li.cur相比覆盖其的border-bottom白色属性

    0