CSS让列表左右两边无边距

2024-09-05 12:17:04

字体：大中小

来源：转载

供稿：网友

CSS让列表左右两边无边距，或许你不在意，但这个效果确实比较实用，有时候我们需要一个列表只在是间的时候显示边框，而两侧的时候就不需要的，因为一般情况下我们会定义一个大边框，所以这时候就需要把两侧的边框给处理掉，本代码正是你需要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS让列表左右两边无边距</title><style>/* democase 1 public css */.demo{	width:340px;	background-color:#D7D7D7;	}.democase2 ul{	padding:20px 0 0 0;}.democase2 li{	float:left;	display:inline;	margin:0 20px 20px 0; }.democase2 li img{	vertical-align:middle;}/* 负margin核心部分 */#demo2 ul{	margin:0 -20px 0 0;}/* overflow:hidden核心部分 */#demo2{	overflow:hidden;}#demo2 ul{	width:360px;	margin:0;}</style></head><body><h2>vevb.com</h2><div id="demo2" class="demo democase2">	<ul class="nostyle clearfix">	   <li><img alt="img1" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>	   <li><img alt="img2" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>	   <li><img alt="img3" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>	   <li><img alt="img4" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>	   <li><img alt="img5" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>	   <li><img alt="img6" src="http://www.aspku.com/jscss/demoimg/201306/demo.jpg"></li>   	</ul></div></body></html>

上一篇：纯CSS实现小圆点和三角形图案

下一篇：CSS3圆环动画技能栏菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注