li添加边框border ,border合并问题

最新推荐文章于 2022-08-20 10:03:59 发布

芒果终结者

最新推荐文章于 2022-08-20 10:03:59 发布

阅读量9.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： li border合并

本文链接：https://blog.youkuaiyun.com/cs23405/article/details/103876542

前端专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种解决CSS中并排元素边框重合的方法，通过调整元素的margin值和使用相对定位，使得相邻元素的边框能够正确显示，避免了视觉上的重叠现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图一出现边框重合的问题图二需要达到的目的，让中间边框合并

问题：ul有多个li，每个li有1像素的边框，那么中间会出现边框重合的问题，废话不多说，直接看下面如何解决边框重合

html

<ul class="lifl clearfix">
    <li class="item">
        //do something
    </li>
    <li class="item">
        //do something
    </li>
    <li class="item">
        //do something
    </li>
                    
</ul>

css

.item{
    width: 200px;
    height:200px;
    border: 1px solid #f4f4f4;
    /*边框合并*/
    margin:0 0 -1px -1px;
    position: relative; 
    z-index: 0;
}

.item:hover{
    border-color: #FF5000;
    z-index: 1;
}

这里的margin 是margin-bottom和margin-left 为-1，也可以是margin-top和margin-right为-1