<!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/p_w_picpaths/s1.jpg"/><br>
      <span>just for test</span></a></li>
    <li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/p_w_picpaths/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/p_w_picpaths/s1.jpg"/><br>
      <span>just for test</span></a></li>
    <li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/p_w_picpaths/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/p_w_picpaths/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/p_w_picpaths/s1.jpg"/><br>
      <span>just for test</span></a></li>
    <li class="justify"><a href="javascript:;"><img src="http://www.ifrans.cn/demo/p_w_picpaths/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/p_w_picpaths/s1.jpg"/><br>
      <span>just for test</span></a></li>
    <li class="justify justify-last"></li><!--插入此行用以解决最后一行无法两端对齐的问题-->
  </ul>
</div>


</body>
</html>