使用text-justify 和 display:inline-block实现两端对齐的解决方案display:inline-block列表布局必要条件
使用text-justify 和 display:inline-block;实现两端对齐的解决方案
display:inline-block列表布局
必要条件：
1：现代浏览器下的首尾标签留空或换行
像这样：
<span>
??? <a href="#">
??????? <img src="test.jpg" />
??? </a>
?</span> <span>
??? <a href="#">
??????? <img src="test.jpg" />
??? </a>
?</span>?
2：IE6/7浏览器
inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。
结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。应该是这个样子滴：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-jusyify下的inline-block自适应列表布局末行对齐修复</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
* {
?font-size:12px;
}
.box {
?width:50%;
?padding:20px;
?margin:0 auto;
?background-color:#f0f3f9;
?text-align:justify;
}
.list {
?width:120px;
?display:inline-block;
?padding-bottom:20px;
?text-align:center;
?vertical-align:top;
}
.justify_fix {
?display:inline-block;
?width:100%;
?height:0;
?overflow:hidden;
}
</style>
</head>
<body>
<div id="main">
? <div id="body" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="justify_fix"></span> </div>
????? </div>
??? </div>
? </div>
</div>
</body>
</html>
?
?
