ul li 设置边框后重合的解决办法

最新推荐文章于 2024-04-28 20:30:00 发布

不及0908

最新推荐文章于 2024-04-28 20:30:00 发布

阅读量1.5k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/huhuhuja/article/details/108829102

版权

改ul li 设置边框后，会产出重合的现象

解决办法就是给他设置margin去重复

li {
        width: 80px;
        height: 30px;
        border: solid 1px #dddddd;
        background-color: #ffffff;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
        margin:0px -1px 0px 0px ;    //设置margin(注意:哪边重合给哪边设置-1px)
      }
      .active {
        border: solid 1px #28b28b;
        margin:0px;                   //点击效果时margin取消
        color: #28b28b;
       
      }

如图：