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

约定不等于承诺〃 2022-04-24 05:30 794阅读 0赞

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

  1. ```
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>JS Bin</title>
  7.   <style>
  8.     span{
  9.       display:inline-block;
  10.       /* border:1px solid red; */
  11.       width:4.5em;
  12.       text-align:justify;
  13.       font-size:20px;
  14.       overflow:hidden;
  15.       height:20px;
  16.       line-height:20px;
  17.     }
  18.     span:after{
  19.       content:"";
  20.       display:inline-block;
  21.       width:100%;
  22.       border:1px solid green;
  23.     } 
  24.   </style>
  25. </head>
  26. <body>
  27.   <span>姓名</span><br>
  28.   <span>联系方式</span>
  29. </body>
  30. </html>
  31. ```

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

发表评论

表情：
评论列表 （有 0 条评论，794人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

    你的名字你的名字/ 0 赞/ 786 阅读