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

本文介绍了一种解决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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值