列表四周去边框案例

最新推荐文章于 2021-12-20 14:35:06 发布

原创最新推荐文章于 2021-12-20 14:35:06 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

案例同时被 2 个专栏收录

27 篇文章

订阅专栏

html

25 篇文章

订阅专栏

本文介绍了一种在网页设计中实现无边框列表的方法，通过使用HTML和CSS，特别是利用clearfix类和overflow属性，来创建一个整洁且美观的列表布局。

需求：
该列表四周无边框在这里插入图片描述
html

	   	<div class="a clearfix">
	   		<ul class="clearfix">
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
	   			<li></li>
     		</ul>
	   	</div>

css

.a {
	width: 1048px;
	height: 240px;
	/*爷爷盒子宽度高度比li小，所以多余的部分隐藏*/
	overflow: hidden;
}
.a ul {
	width: 1060px;
}
.a li {
	width: 210px;
	height: 80px;
	float: left;
	border-right: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
}