兼容ie6/ie7的inline-block元素的两端对齐布局
发布时间：2023-09-06 编辑：jiaochengji.com
教程集为您提供兼容ie6/ie7的inline-block元素的两端对齐布局等资源，欢迎您收藏本站，我们将为您提供最新的兼容ie6/ie7的inline-block元素的两端对齐布局资源
今天我给大家介绍巧用inline-block实现div两两端对齐的具体操作步骤，这里测试过兼容ie6、ie7浏览器了，其它的主浏览器也支持。
inline-block元素的两端对齐在图文列表布局、瀑布流布局中有着广阔的应用空间。不过ie6、ie7下的兼容性一直是个硬伤。下面尝试用ie专有属性text-justify和一些css hack兼容ie6/7。
css代码
| 代码如下 | 复制代码 |
| ul {
list-style: none;
width: 100%;
}
li {
width: 140px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: #ECC;
}
.text-justify {
text-align: justify;
*text-justify:inter-ideograph; /*IE私有属性*/
}
.justify {
vertical-align: top;
display: inline-block;
*display:inline;
*zoom:1;
}
.justify-last {
width: 100%;
height: 0;
padding: 0;
overflow: hidden;
} |
html代码
| 代码如下 | 复制代码 |
| <ul class="text-justify">
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<!--此处省略若干行-->
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<!--插入此行用以解决最后一行无法两端对齐的问题-->
<li class="justify justify-last"></li>
</ul> |
实例
| 代码如下 | 复制代码 |
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兼容ie6/ie7的inline-block元素的两端对齐布局</title>
<link rel="stylesheet" type="text/css" href="style/base.css" />
<style>
.box {
width: 60%;
height: 100%;
overflow: hidden;
margin: 20px auto;
text-align: justify;
background: #EEE;
}
ul {
list-style: none;
width: 100%;
}
li {
width: 140px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: #ECC;
}
.text-justify {
text-align: justify;
*text-justify:inter-ideograph;
}
.justify {
vertical-align: top;
display: inline-block;
*display:inline;
*zoom:1;
}
.justify-last {
width: 100%;
height: 0;
padding: 0;
overflow: hidden;
}
</style>
</head> <body>
<div class="box">
<ul class="text-justify">
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test test test just for test just for testtesttest</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify justify-last"></li>
</ul>
</div> </div>
</body>
</html> |
您可能感兴趣的文章：
