css實現文字左右對齊

標籤：containe   代碼   over   實現   after   img   hidden   分享   集合   

 

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實現文字左右對齊