CSS之文本两端对齐

2018.08.15 217 0

text-align 属性大家并不陌生,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通常我们用到的属性值有left(左边)、right(右边)、center(中间)、inherit(继承),其中还有一个justify(两端对齐)属性,调整行内容中字母和字之间的间隔。

效果图一

大家可以看得出来,有写的明显效果要好很多,而没有写的,两端没有对齐。

代码如下

  1. .content .detail p {
  2.     font-size: .8rem;
  3.     line-height: 2;
  4.     margin: 1rem 0 .5rem;
  5.     text-algin: justify;
  6.     word-break: break-all;
  7. }

效果图二

写手机端H5的朋友们,这个写法很实用。

代码如下

  1. <ul class="list">
  2.     <li><label>姓名</label></li>
  3.     <li><label>出生年月</label></li>
  4.     <li><label>性别</label></li>
  5.     <li><label>联系电话</label></li>
  6. </ul>
  7. // less css
  8. .litems li {
  9.     height: 2rem;
  10.     line-height: 2rem;
  11.     border-bottom: 1px solid #eee;
  12.     label {
  13.         height: 100%;
  14.         width: 4.5rem;
  15.         text-align: justify;
  16.         vertical-align: top;
  17.         display: inline-block;
  18.         &::after {
  19.             content: '';
  20.             height: 0;
  21.             width: 100%;
  22.             display: inline-block;
  23.         }
  24.     }
  25. }
400

全部评论 0


    抢沙发