沉浸式阅读
Beta
原创

css实现文字两端对齐

©著作权     黑土 Ai 助手 订阅 CSS相关       2018-11-19       697      0      0      0      2018-11-19
学习要点:css实现文字两端对齐,如下效果: 文字两端对齐仅仅使用使用text-algin:justify无法实现预期效果,这里我们借用伪类(::after)来实现文字的两端对齐。具体代码如下:style.containerli{margin:0.5rem auto;width:4rem;height: 0.5rem;line-height: 0.5rem;border:1px solid #0000ff;}.justify {display: inline-block;vertical-align: top;wi

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>

本文标题: css实现文字两端对齐

本文链接: https://mbkfw.com/course/c-596.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩