CSS实现两端对齐效果

text-align属性下有一个justify值可以设置元素的两端对齐。但是text-align: justify属性有一些不足之处：

1. 在单行文本下，无法实现两端对齐效果。
2. 在多行文本下，无法实现最后一行文本的两端对齐效果。

单行文本

<div>unclekeith wanna be a geek!</div>
div{
    background-color: lightblue;
    text-align: justify;
}

解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。

 .div{ 
       text-align: justify;
 } 
.keith:after { 
       display: inline-block;
        width: 100%; 
       content: '';
 }

今天的文章CSS实现两端对齐效果分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。