css實現文字兩端對齊


 

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>

 如有錯誤還望指正 ^-^ 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM