为了表述上逻辑清晰。我们先把IE6和IE7浏览器晾在一边，看看IE8+浏览器以及现代浏览器下如何display:inline-block+text-align:justify实现列表元素的两端对齐。
说穿了其实很简单，我们不妨以最常见的列表标签-ul, li标签举例，要实现li列表的两端对齐，直接下面这点CSS代码就OK了：
ul{text-align:justify;}li{display:inline-block;}简单得让人当场吐血三升。
唯一需要注意的就是列表元素首尾标签留空（或换行）
不能够上一个标签组的结束标签与下一个标签组的其实标签连在一起
不仅如此，对于IE8浏览器，列表元素不能处在font-size:0的环境下，至少code<font-size:1px，因为IE8浏览器font-size:0或直接把换行空格或普通空格抹掉而无法实现两端对齐效果。
ok，下面是重头戏了，纠缠不清的IE6/IE7浏览器。显然上面的ul, li样式组合在IE6/7浏览器下是行不通的，即使你使用hack让IE6/7下的li标签有类似于display:inline-block的特性也是没有作用的。那么如何才能让IE6/7浏览器也有列表元素支持text-align:justify属性呢？经过我反复试验与调试，总结了两点：inline标签化以及结束标签连续化。
1. inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。
2. 结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。例如下面这个就是不行的：
描述而应该是这个样子滴：
描述我们已经习惯了结构化的缩进，所以上面结束标签连写看上去很不自然，有些别扭。但是，为了实现效果，这是没有办法的事情。注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。
IE6/IE7浏览器同时满足上面的inline标签化以及结束标签连续化，再加上先前现代浏览器下的首尾标签留空，IE6/IE7浏览器也就能够实现列表元素的两端对齐啦！
为了便于更直观的知道各个浏览器下实现两端对齐效果需要注意的事项，我特地制作了下表：
| 浏览器 | 注意事项 |
|---|---|
| IE6 | inline水平列表标签、列表结束标签连续、列表元素间换行或留空 |
| IE7 | inline水平列表标签、列表结束标签连续、列表元素间换行或留空 |
| IE8 | 列表元素间换行或留空、列表元素的环境字体大小不能为0 |
| 现代浏览器 | 列表元素间换行或留空 |
然而，现在还有一个很悲剧的问题没有解决，就是当列表元素最后一行无法两端对齐的悲剧。
其实这个问题很好解决的。
如何悲剧变喜剧？
列表（或文字）要两端对齐的前提就是内容必须超过一行，所以，要解决最后一行元素无法两端对齐的文字其实很简单，就是在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了，例如：
.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}如下HTML：
例如拿先前最后一行列表悲剧的demo举例，现在在该demo列表最后添加上面类名为justify_fix的span元素，结果最后一行两端对齐排列了
①inline水平标签
②列表结束标签连续
③列表标签换行或留空
来源：oschina
链接：https://my.oschina.net/u/1403171/blog/204457