CSS单行、同行文本左右对齐

再项目需求中，UI小姐姐常常要考虑项目的排版样式更简洁高级，常常会在项目设置内容或者字体两端对齐的效果，比如，在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地等。

针对这种排版，因为字数不确定，所以我们不好设置固定距离，但是正好css的样式里有一个text-align设置内容对齐，并且有一个是正好设置两端对齐text-align: justify，正中下怀，其实现的效果就是可以让文字两端对齐显示，但是使用也有bug，

（1） text-align:justify 不处理强制打断的行，也不处理块内的最后一行。通俗一点讲，就是只有一行显示的时候这个属性是不起作用的，或者使用了word-break: break-all;这种强制换行的属性，也是不起作用的。

（2）如果内容是多于一行的时候，除了最后一行，都是两端对齐的效果。

总结就是（文字内容要超过一行，最后一行没有两端对齐效果），但是表单的内容就是一排要两端对齐，咋整嘞？各位小伙伴不要着急，我们当然也有很好的解决方法！！

1、方法一在内容中添加一个用于占位的标签，让内容处于第一行，就能达到效果

html 结构<ul><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>

2、方法二：使用：after伪元素（ie7及以下不支持伪类）

html结构<ul><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>

前两种方法，原理差不多，但是inline-block盒子会导致下面会多出空白，这时就只有设置 li 的高度，比如给 li 添加 height: 40px;line-height: 40px;

3、方法三：使用 text-align-last:justify 属性

html 结构<ul><li>用户名</li><li>账号</li><li>验证码</li></ul>css 样式ul li{width: 100px;border: 1px solid red;text-align: justify;text-align-last: justify;/* 设置最后一行内容两端对齐 */height: 24px;list-style: none;}

这种解决方法看起来很不错，也很简单，但是text-align-last:justify 这个属性的兼容性不好，在谷歌、火狐浏览器上能正确显示，但是在其它浏览器中却没效果。因为大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格。

4、方法四兼容多种浏览器的终极兼容方法

html 结构<ul><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及以上，还有其它的浏览器基本都支持。

再来看看页面的显示效果：