display:inline-block/text-align:justify下列表的两端对齐布局

为了表述上逻辑清晰。咱们先把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浏览器也就可以实现列表元素的两端对齐啦！

为了便于更直观的知道各个浏览器下实现两端对齐效果须要注意的事项，我特意制做了下表：

各个浏览器实现text-align:justify下的两端对齐布局注意事项表

浏览器	注意事项
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水平标签

②列表结束标签连续

③列表标签换行或留空