css实现文字两端对齐

89 88 66

已于 2022-10-15 16:48:06 修改

阅读量3.4k

点赞数 1

文章标签： css 前端 html

于 2022-10-15 16:41:37 首次发布

本文链接：https://blog.csdn.net/weixin_48374341/article/details/127337117

版权

css实现文字两端对齐，如下效果：

在这里插入图片描述

文字两端对齐仅仅使用使用text-algin:justify 无法实现预期效果，这里我们借用伪类(::after)来实现文字的两端对齐。

<style>
  .container>li{
    margin:0.5rem auto;
    width:4rem;
    height: 0.5rem;
    line-height: 0.5rem;
    border:1px solid #0000ff;
  }
  .justify {
    display: inline-block;
    vertical-align: top;
    width:100%;
    text-align: justify;
  }
  .justify::after{
    content:"";
    display: inline-block;
    width:100%;
    overflow:hidden;
    height:0;
  }
</style>

<ul class="container">
  <li >
    <p class="justify">集合地点在哪里呀</p>
  </li>
  <li>
    <p class="justify">两端对齐</p>
  </li>
  <li >
    <p class="justify">看,我两端对齐了</p>
  </li>
  <li >
    <p class="justify">左右</p>
  </li>
</ul>