使用text-justify 和 display:inline-block;实现两端对齐的解决方案

display:inline-block列表布局

必要条件：

1：现代浏览器下的首尾标签留空或换行

像这样：

   
       
   
 
   
       
   
  

2：IE6/7浏览器

inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。

结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。应该是这个样子滴：

    
        
    
    描述

注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。

 

总结如下：

各个浏览器实现text-align:justify下的两端对齐布局注意事项表
IE6 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE7 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE8 列表元素间换行或留空、列表元素的环境字体大小不能为0
现代浏览器 列表元素间换行或留空

 

然后样式这样设置，外层元素的样式：text-align:justify;列表元素的样式：display:inline-block;

 

以下是demo：

 

 

   

     

       

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~

          哇哦，美女，口水，鼻血~~~