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

原创于 2020-01-07 16:25:13 发布 · 9.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#li #border合并

前端专栏收录该内容

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