Xqqqqq. 2022-02-26 16:36 采纳率: 0%
浏览 215

css利用伪元素做竖线分隔,为什么会出现竖线粗细不一样的情况啊

问题遇到的现象和发生背景

img

问题相关代码,请勿粘贴截图
.recom-bd ul li {
    position: relative;
    width: 25%;
    height: 164px;
}

.recom-bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    height: 144px;
    width: 1px;
    background-color: #ddd;
}

.recom-bd ul li img {
    width: 100%;
    height: 100%;
}
 <ul>
                <li class="fl"><a href="#"><img src="upload/recom1.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom2_04.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom3_06.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom4_08.png" alt=""></a></li>
            </ul>

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-02-26 17:27
    关注

    检查a或者img是否加了边框什么,用题主代码测试改红色变是没问题的

    img

    <div class="recom-bd"> <ul>
                    <li class="fl"><a href="#"><img src="upload/recom1.png" alt=""></a></li>
                    <li class="fl"><a href="#"><img src="upload/recom2_04.png" alt=""></a></li>
                    <li class="fl"><a href="#"><img src="upload/recom3_06.png" alt=""></a></li>
                    <li class="fl"><a href="#"><img src="upload/recom4_08.png" alt=""></a></li>
                </ul>
    </div>
    <style>
    .recom-bd ul li {
        position: relative;
        width: 25%;
        height: 164px;
    float:left
    }
     
    .recom-bd ul li:nth-child(-n+3)::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 0;
        height: 144px;
        width: 1px;
        background-color: #f00;
    }
     
    .recom-bd ul li img {
        width: 100%;
        height: 100%;
    }
    </style>
    
    
    评论

报告相同问题?

问题事件

  • 创建了问题 2月26日