前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS实现文本两端对齐

CSS实现文本两端对齐

作者头像
李维亮
发布2021-07-08 10:12:35
9930
发布2021-07-08 10:12:35
举报
文章被收录于专栏:李维亮的博客
css_center.png
css_center.png
代码语言:javascript
复制
<el-col :span="3"><span class="newFix-name">车牌号:</span></el-col>
<el-col :span="3"><span class="newFix-name">基础信息:</span></el-col>
<el-col :span="3"><span class="newFix-name">车型信息:</span></el-col>

<style scoped>
    .newFix-Info-box li span {
        display: inline-block;
        width:70px;
        height:30px;
        color: #999;
        margin-right: 10px;
        text-align: justify;
        vertical-align: middle;
      }
      .newFix-Info-box li span:after{
        display: inline-block;
        width:100%;
        height: 0;
        content: '';
      }
</style>

在实现对齐的时候,由于justify对最后一行无效,所以我们需要在最后新增一行来实现,实现方法 1.利用css标签span,i,p等都可以实现增加空行, 2.利用css伪类 after来实现也就是上面代码的实现机制,感觉这样实现是最好的一种方案,推荐给大家。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档