2018-09-19CSS内联块元素案例（更新中）
2018-09-30 本文已影响9人
菩灵
图片要能被点击去到商品详情页，那么要用a标签来插入图片
重置所有元素的margin和padding
让图片排列成一行，用内联块元素的话会有莫名其妙的间距。
用float的话没法把父级撑开，这时候设置clearfix用到父级，就可以撑开。
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
图片（商品列表）实例：
代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表布局</title>
<style type="text/css">
body,ul,h3{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
}
.pic_list_con{
width: 958px;
border: 1px solid #ddd;
margin: 50px auto 0;
overflow: hidden;
}
.pic_list_con h3{
width: 918px;
height: 50px;
border-bottom: 1px solid #ddd;
/*margin-left: 20px;*/
margin: 0 auto;
}
.pic_list_con h3 span{
display: inline-block;
height: 50px;
border-bottom: 2px solid red;
font: 18px/50px "Microsoft Yahei";
color: #000;
padding: 0 15px;
}
.pic_list_con ul{
width: 950px;
/*background-color: cyan;*/
margin: 20px 0 13px 20px;
}
.pic_list_con ul li{
width: 160px;
height: 68px;
float:left;
margin: 0 29px 25px 0;
}
</style>
</head>
<body>
<div class="pic_list_con">
<h3><span>图片列表</span></h3>
<ul class="clearfix">
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
图片列表效果
