如何给布局设置边框的时候边框能不重合

最新推荐文章于 2024-07-05 16:57:07 发布

Evelyn-zhou

最新推荐文章于 2024-07-05 16:57:07 发布

阅读量682

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ZQY1436556395/article/details/106218226

版权

在CSS布局中，当相邻元素设置边框时，边框可能会重合。解决这个问题有两种方法：一是通过设置负margin，等于边框宽度，来消除边框重合；二是使用额外的div，将边框分配给外层div和内层元素，以实现边框间隔。

摘要由CSDN通过智能技术生成

问题：

我们再写页面的时候，经常会遇到需要给每个item加边框的情况，又因为每个item是相邻的，所以如果给每个item设置边框的话，边框会出现重合的现象,

解决办法一：

如下所示可以给item重合的边设置margin为负的边框宽度

<style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 布局样式 */
        .today {
            width: 1100px;
            margin: 0 auto;
        }

        .today ul {
            margin-right: -3px;
        }

        .today ul li {
            float: left;
            width: 420px;
            height: 190px;
           border: 1px solid #eaeaea;
            margin-right: -1px;
            margin-bottom: -1px;
        }

        .today ul .last {
            float: right;
            width: 260px;
            height: 381px;
        }

    </style>
</head>
<body>
    
    <div class="today">
        <ul>
            <li class="last