多个相邻的盒子外边框合并的问题

最新推荐文章于 2023-03-01 13:42:30 发布

Blooming_x

最新推荐文章于 2023-03-01 13:42:30 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/Blooming_x/article/details/117913918

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.通过设置margin-left的值来实现

这是没有实现的效果,可以看到相邻的边框变粗了

像这样多个盒子，可以使用到伪类选择器，对其中的元素进行单独设置margin-left

nth-child中的n是一个动态的，所以通过设置表达式对需要的元素设置样式

.time .item{
		box-sizing: border-box;
		position: relative;
		width: 14.3%;
		height: 100rpx;
		border: 2rpx solid #e0dede;
		margin-left: -2rpx;
	}
	.time .item:nth-child(7n+1){
		margin-left: 0;
	}
	.time .item:nth-child(n+8){
		margin-top: -2rpx;
	}

最后效果图