相信大家对于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: ''; }