text-align:justify两端对齐的使用及注意事项

相信大家对于text-align的基本使用已经得心应手了。

这里总结一下text-align:justify使用中遇到的问题。

text-align:justify可以使文本的两端都对齐，在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母的间隔，使各行的长度恰好相等。如果内容很少被拉开的距离太长，可以使用letter-spacing收缩一下字符间的距离。

相信好多人在使用的时候会发现最后一行不管用，因为text-align:justify不对快内的最后一行文本做处理，所以当内容只有一行的时候也不会做处理。（只有一行的时候，既是第一行也是最后一行）

这个时候我们要添加一行作为最后一行

.justify:after{    content:'';     width:100%;     height:0;     margin:0;    display:inline-block;    overflow:hidden;}

完整的代码如下：

说明：列表元素的首尾标签要有空隙（空格或者换行）

写成<li></li><li></li>是错误的，是没有两端对齐效果的

希望总结的对大家有帮助。

 <ul class="justify_list" >        <li >0</li>        <li >1</li><li >2</li><li >3</li><li >4</li>        <li >5</li>        <li >6</li>        <li >7</li>        <li >8</li>        <li >9</li>        <li >10</li></ul>.justify_list{        text-align: justify;        display: inline-block;        width: 100%;}.justify_list li{display: inline-block;list-style: none;}.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content: '';}