<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:inline-block属性消除间隙(解决ie6.7)</title>
<style>
*{margin: 0;padding: 0;border:0;}
.container{width:306px; margin:0 auto; margin-top: 10px; font-size:0;}/*font-size:0;消除li水平间隙 vertical-align:top;除li垂直间隙*/
<body>
<ul class="container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:inline-block属性消除间隙(解决ie6.7)</title>
<style>
*{margin: 0;padding: 0;border:0;}
.container{width:306px; margin:0 auto; margin-top: 10px; font-size:0;}/*font-size:0;消除li水平间隙 vertical-align:top;除li垂直间隙*/
.container li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top;}
.box-one{width:712px; margin:0 auto; margin-top: 100px; font-size:0;background-color: #f5f5f5;padding-bottom: 10px;}
.box-two{display:inline-block; *display:inline; *zoom:1; width:200px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top;}
</style>
</head><body>
<ul class="container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box-one">
<div class="box-two"></div><div class="box-two"></div>
</div>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
