有些时候我们在写一些表单页面的时候,会遇到文字两边对齐的情况,如下:

今天来看看如何实现。

flex实现

display:flex的时候,有一个justify-content: space-between;的设置,这个设置表示内部元素均匀平分容器同时靠两边对齐。这种方式可以实现两端对齐,但是需要给每个字添加一个span,关键代码如下:

column实现

column表示分列展示,可以设置column-size,column-gap,设置列的行数和间隙。用这个实现两端对齐可能比较麻烦,例如如果有两个字,那么column-size为2,column-gap为100%-2em;如果为3个字,column-size为3,column-gap为50%-1.5em,计算方法大致如下:

background Layer 1 column-gap:calc(100%-2em) 2*gap+3em=100% gap=calc(50%-1.5em) 两个字 三个字 四个字 3*gap+4em=100% gap=calc(33.3%-1.33em)

text-align:justify实现

text-align:justify表示文字均匀对齐,这个用来实现两端对齐的话有一个问题,就是它必须要有一行以上才行,因此我们一般会利用:after在弄一行出来,同时设置line-height和height,将第二行隐藏。关键代码如下:

text-align-last:justify实现

这个和text-align:justify相比更灵活,它表示最后一行的文字对齐方式,因为我们这里只有一行,因此刚好,不过这个只是chrome和ff支持,safaric不支持。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字