css实现文字两端对齐

原创 Laughing  2017-09-24 12:32  阅读 201 次 评论 1 条

以前做C/S开发的时候,经常使用填充空格的方式实现文字的两端对齐。但是有些时候,填充空格的方式,我们常常无法确认需要具体填充几个空格。

通过text-align: justify,其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。但是只有这个属性还是不行的,要使文字两端对齐,我们还得使用一个行内空标签来助阵,比如等。

小的Demo

  1. @section Style{  
  2.     <style rel="stylesheet" type="text/css">  
  3.         .div{  
  4.             width: 500px;  
  5.             border: 1px solid red;  
  6.             text-align: justify;  
  7.             margin-top: 15px;  
  8.         }  
  9.         div li{  
  10.             display: inline-block;  
  11.             width: 100%;  
  12.         }  
  13.     </style>  
  14. }  

效果图

本文地址:https://www.lisen.me/the-css-implementation-on-both-ends-of-the-text-alignment.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 匿名 【队长】 @回复

    都是干货