CSS重叠解决边框相邻变粗问题

最新推荐文章于 2024-07-16 17:16:30 发布

KEPROM

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量3.1k

点赞数 5

分类专栏：前端基础文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/KEPROM/article/details/115980294

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

相邻的div，ul，li等元素盒子设置边框后的重叠问题

当我们为相邻盒子设置边框的时候会发现边框相邻导致边框变粗在这里插入图片描述

解决方法：
对浮动的盒子设置margin-left：-1px（-1px像素为边框大小）；
使边框向左移，导致边框重叠

效果如下：
在这里插入图片描述
代码：

<style>
            ul li {
                float: left;
                list-style: none;
                width: 150px;
                height: 200px;
                border: 1px solid red;
                margin-left: -1px;
            }
</style>
<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KEPROM

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS重叠解决边框相邻变粗问题

CSS重叠解决边框相邻变粗问题并显示被压边框相邻的div，ul，li等元素盒子设置边框后的重叠问题当我们为相邻盒子设置边框的时候会发现边框相邻导致边框变粗解决方法：对浮动的盒子设置margin-left：-1px（-1px像素为边框大小）；使边框向左移，导致边框重叠效果如下：代码：<style> ul li { float: left; list-style: none;
复制链接

扫一扫