CSS小技巧之两行文字两端对齐

您所在的位置:网站首页 怎么样让上下两行字两端对齐显示 CSS小技巧之两行文字两端对齐

CSS小技巧之两行文字两端对齐

2024-07-11 01:08| 来源: 网络整理| 查看: 265

假如一个页面需要填写姓名和联系方式,为了使样式美观,通常需要文字两端对齐,即“姓”和“联”对齐,“名”和“式”对齐,通常情况下是很难对齐的: 在这里插入图片描述 这边有个小技巧,就是利用text-align:justify+伪类,实现方式如下:

``` JS Bin span{ display:inline-block; /* border:1px solid red; */ width:4.5em; text-align:justify; font-size:20px; overflow:hidden; height:20px; line-height:20px; } span:after{ content:""; display:inline-block; width:100%; border:1px solid green; } 姓名 联系方式 ```

在这里插入图片描述 为什么要用伪类? 因为text-align:justify;可以实现文本两端对齐,只对换行文本生效,这个伪类相对于让文本换行。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3