浅谈css内容排列,最右边间距去掉问题

css几列同等内容排列,中间边距,几种排列方式:

公共:

<div class="box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

1. 伪类方式nth-of-type()

   如果你不考虑ie8,可以用这种方式做.

.box{
	list-style: none;
	width: 800px;
	margin: 20px auto;
	background: #f8f8f8;
}
.box ul{
	font-size: 0;
}
.box li{
	display: inline-block;
	background: #ddd;
	width: calc(25% - 20px);
	height: 150px;
	margin-right: 20px;
}
.box li:nth-of-type(4n){
	margin-right: 0;
}

2.给最后一个列表加类

<div class="box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li class="last"></li>
	</ul>
</div>

.box{
	list-style: none;
	width: 800px;
	margin: 20px auto;
	background: #f8f8f8;
}
.box ul{
	font-size: 0;
}
.box li{
	display: inline-block;
	background: #ddd;
	width: calc(25% - 20px);
	height: 150px;
	margin-right: 20px;
}
.box li.last{
	margin-right: 0;
}

3.给父元素设置负边距法

.box{
	list-style: none;
	width: 800px;
	margin: 20px auto;
	background: #f8f8f8;
	
}
.box ul{
	font-size: 0;
	margin-right: -20px;
}
.box li{
	display: inline-block;
	background: #ddd;
	width: calc(25% - 20px);
	height: 150px;
	margin-right: 20px;
}

4.flex布局

justify-content: space-between;主要是这个,两端对齐,所以li的右边距可以省略.

.box{
	list-style: none;
	width: 800px;
	background: #f8f8f8;
	
}
.box ul{
	font-size: 0;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box li{
	display: inline-block;
	background: #ddd;
	width: 185px;
	height: 150px;
	margin-bottom: 20px;
}

5.grid网格布局

如果不考虑兼容问题,我觉得网格布局在这几个来说是最方便的布局,li的边距可以省略,宽度也不需要在li设置了.

.box{
	list-style: none;
	width: 800px;
	background: #f8f8f8;
	
}
.box ul{
	font-size: 0;
	
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}
.box li{
	display: inline-block;
	background: #ddd;
	height: 150px;
}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/692

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！