css 两端对齐

最新推荐文章于 2024-07-28 17:33:37 发布

Unique·Blue

最新推荐文章于 2024-07-28 17:33:37 发布

阅读量151

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42289080/article/details/115305487

版权

css css3

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模拟一个div两端对齐的情况：

<div class="box">两端对齐</div>

.box {
  width: 200px;
  height: 36px;
  line-height: 36px;
  margin: 20px auto;
  background: #eee;
  text-align: justify;
  -webkit-text-align: justify;
  text-align-last: justify;/* ie9*/
  -webkit-text-align-last: justify;/*chrome 20+*/
  text-justify: distribute; /* firefox */
}

效果：

在这里插入图片描述

总结：

text-align: justify;
-webkit-text-align: justify;
text-align-last: justify;/* ie9*/
-webkit-text-align-last: justify;/*chrome 20+*/
text-justify: distribute; /* firefox */