页面排版中,设计师常常要考虑项目的排版样式更简洁高级，常常会在项目设置内容或者字体两端对齐的效果，如下图
针对这种排版，因为字数不确定，所以我们不好设置固定距离，但是正好css的样式里有一个text-align设置内容对齐，并且有一个是正好设置两端对齐text-align: justify，正中下怀，其实现的效果就是可以让文字两端对齐显示，但是使用也有bug，
（1） text-align:justify 不处理强制打断的行，也不处理块内的最后一行。通俗一点讲，就是只有一行显示的时候这个属性是不起作用的，或者使用了word-break: break-all;这种强制换行的属性，也是不起作用的。
（2） 如果内容是多于一行的时候，除了最后一行，都是两端对齐的效果。
总结就是（文字内容要超过一行，最后一行没有两端对齐效果），但是表单的内容就是一排要两端对齐，咋整嘞？ 各位小伙伴不要着急，我们当然也有很好的解决方法！！
方法一 在内容中添加一个用于占位的标签，让内容处于第一行，就能达到效果
html 结构
<ul>
<li>联系人<p class="box"></p></li>
<li>性别<p class="box"></p></li>
<li>手机号<p class="box"></p></li>
<li>邮箱<p class="box"></p></li>
</ul>
css 样式
<style>
ul li{ width: 100px; border: 1px solid red;
text-align: justify; height: 24px; list-style: none; }
.box{ display: inline-block; width: 100%; }
</style>
方法二：使用：after伪元素（ie7及以下不支持伪类,可忽略不计）
html 结构
<ul>
<li>联系人</li>
<li>性别</li>
<li>手机号</li>
<li>邮箱></li>
</ul>
css 样式
<style>
ul li{ width: 100px; border: 1px solid red;
text-align: justify; height: 24px; list-style: none; }
li::after{ content: ""; display: inline-block; width: 100%; }
</style>
方法三 兼容多种浏览器的（最优方案）
html 结构
<ul>
<li>联 系 人</li>
<li>性 别</li>
<li>手 机 号</li>
<li>邮 箱></li>
</ul>
css 样式
<style>
ul li{ width: 100px; border: 1px solid red;
text-align: justify; text-align-last: justify; /* 设置最后一行内容两端对齐 */
height: 24px; list-style: none; }
li{ content: ""; display: inline-block; width: 100%; }
</style>
注意每个单词之间都有空格，而且只需一个空格就行，多个空格也不影响。如果没有这个空格，兼容性很差，基本只有谷歌和火狐支持，这个方法兼容ie7及以上，还有其它的浏览器基本都支持
