text-align:justify实现文本两端对齐

最新推荐文章于 2022-04-12 19:04:14 发布

zlting~

最新推荐文章于 2022-04-12 19:04:14 发布

阅读量289

点赞数

分类专栏： CSS样式

本文链接：https://blog.csdn.net/sunshineTing2/article/details/108981893

版权

CSS样式专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果如下:

在这里插入图片描述

<ul>
      <li><span>姓名</span>:<span>张三</span></li>
      <li><span>出生年月</span>:<span>199908</span></li>
      <li><span>年龄</span>:<span>20</span></li>
</ul>

实现: 左右对齐 + 顶端对齐 + after选择器

ul{
    li{
      span:first-child{
        display: inline-block;
        width: 100px;
        text-align: justify;  // 左右对齐
        vertical-align: top; // 顶端对齐
        &:after{  // :after选择器
          display: inline-block;
          width: 100%;
          content: '';
        }
      }
      span:last-child{
        margin-left: 20px;
        color: #555;
      }
    }
}