时间：2021-07-01 10:21:17 帮助过：27人阅读
justify我的理解，使元素内部的子元素两端对齐，子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时，因为只有一行，当作最后一行，所以不会两端对齐的效果。
姓名对齐我们比较常用的是 （半个中文空格）， （一个中文空格）来添充两个字，三个字的姓名，使包括四字的姓名都能对齐。例如：
欧阳大咖
张 小 三
王 五
但我们发现大部分浏览器是正常的，但不幸的是我们发现手机浏览器打开大部分是不行的，效果就像下面那样对不齐。
欧阳大咖
张 小 三
王 五
所以就想到了用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：
让浏览器认为这不是最后一行就行了
在元素里面加一个会换行的空的子元素比如:
<i style="display:inline-block;width:100%;height:0;">i>
例子：html结构
<ul class="arter"> <li><span>作品名称<i>i>span>： 宝贝儿li> <li><span>作品类型<i>i>span>： 油画li> <li><span>艺术家<i>i>span>： 张玉瀛li> <li><span>风格<i>i>span>： 超现实li> <li><span>材质<i>i>span>： 布面油画li> <li><span>题材<i>i>span>： 人物li> <li><span>创作时间<i>i>span>： 2011li> <li><span>所在位置<i>i>span>： 华东li> <li><span>尺寸<i>i>span>： 78x78cmli> ul>
scss
li{font-size:14px;line-height:24px;color:#4a4a4a; span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top; i{display:inline-block;width:100%;height:0;} } }
效果
几点注意事项：
1）span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使换行；
2）必须要设置span元素的height，和overflow:hidden否则还是会占高度；
3）vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成
