web前端：左右对齐Justify遇到的坑

　　前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

　　遇到的问题

　　这两天在开发一个病历的对外展示页面，设计稿上label是左右拉伸对齐的，显示效果图如下：

　　怎么实现这种效果呢？

　　首先想到的是文字中间加空格，但是这种方式太low了，而且不太容易控制。网上查资料，发现用justify可以实现。

　　.item-field{

　　display:inline-block;

　　width:80px;

　　text-align:justify;

　　}

　　.....

　　<div>

　　<labelclass="item-field">主诉：</label>

　　</div>

　　但是加上上述样式后，文字依然没有左右对齐。

　　justify为什么没有生效呢？

　　查询MDN上关于text-align的介绍，发现text-align有以下规则：

　　1.text-align只对块级元素或者table-cell有效果

　　2.text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐

　　3.justify：文字向两侧对齐，对最后一行无效

　　由于label标签的内容"主诉"只有一行，所以justify没有生效

　　解决方式

　　给label标签添加伪元素，伪元素独占一行且是最后一行，这样label的内容就可以左右对齐

　　.item-field{

　　display:inline-block;

　　width:80px;

　　text-align:justify;

　　line-height:0;

　　}

　　.item-field::after{

　　content:'';

　　height:0;

　　width:100%;

　　display:inline-block;

　　line-height:

　　}

　　注释：

　　::after用来创建一个伪元素，作为==已选中元素的最后一个子元素==。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

　　为什么不使用justify-all

　　text-align还有一个可选值justify-all,根据MDN上的定义：justify-all同justify一样，区别是最后一行也会两端对齐。

　　为什么不使用justify-all呢？因为justify-all是一个体验性的API，各个主流浏览器都不支持，浏览器支持度

　　小结

　　text-align:justify可以设置元素内容左右对齐，但是对最后一行不生效。如果内容只有一行，可通过伪元素添加一个空行，实现内容左右对齐的效果。

　　随着互联网技术的发展，HTML5，css3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。