inline-block替换float:left列表

最新推荐文章于 2026-01-06 22:03:14 发布

转载最新推荐文章于 2026-01-06 22:03:14 发布 · 460 阅读

文章标签：

#cms #html #html5 #ie6

div+css 专栏收录该内容

89 篇文章

订阅专栏

本文介绍了一种使用CSS的inline-block属性来替代传统的float:left布局的方法，这种方法可以更好地实现图片或其他元素的并排显示，并提供了兼容不同浏览器的解决方案。

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>inline-block替换float:left列表</title>

  <!--[if lt ie 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  
  <style type="text/css">
/* css start */
.list {
	font-size:0;/* 所有浏览器 */
	*word-spacing:-1px;/* IE6、7 */
	max-width:820px;
	margin:0 auto;
}
.list ul{_width:840px; margin-left:-20px;}
.list ul li{
	list-style: none;
	max-width:400px; 
	height:279px; margin-left:20px;
	margin-bottom:20px;
	font-size: 12px;
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align:top;
	display: inline-block;
	*display:inline;
	*zoom:1;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.list{letter-spacing:-5px;}/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
/*css end */
</style>
</head>
<body>

  <!-- html start -->
<div class="list">
    <ul>
        <li><img src="../images/pic01.jpg" alt=""></li>
        <li><img src="../images/pic01.jpg" alt=""></li>
        <li><img src="../images/pic01.jpg" alt=""></li>
        <li><img src="../images/pic01.jpg" alt=""></li>
        <li><img src="../images/pic01.jpg" alt=""></li>
        <li><img src="../images/pic01.jpg" alt=""></li>
    </ul>
</div>
  <!-- html end -->
  
</body>
</html>