ie 6/ie 7対応inline-block要素の両端揃えレイアウト
3961 ワード
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> ie6/ie7 inline-block </title>
<meta name="author" content="ifrans.cn" />
<meta name="description" content=" ie6/ie7 inline-block " />
<meta name="keywords" content=" ie6, ie7,inline-block, " />
<style>
html{color:#000;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,hr,button{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial;}
input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:inherit;}
img{border:0;}
iframe{display:block;}
em,th{font-style:normal;font-weight:500;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.fn-clear{zoom:1;}
.fn-clear:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;}
.fn-hide{display:none;}
.fn-left,.fn-right{display:inline;}
.fn-left{float:left;}
.fn-right{float:right;}
.fn-hide-text{font-size:0;line-height:0;color:rgba(0,0,0,0);}
.sl-wrap,.sl-wrap td,.sl-wrap th{word-wrap:break-word;word-break:break-all;}
.sl-wrap-table{ table-layout:fixed; }
.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;/*IE */
}
.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="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/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="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/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="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify justify-last"></li><!-- -->
</ul>
</div>
</body>
</html>