前端即网站前台部分,运行在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,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。