CSS 單行 文字兩端對齊 方法！

 要實現的最終效果：

 

 

方法1：

       div代碼

<div class="strong_center">商品合計</div>

      css代碼

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

 

方法2：

      div代碼

<div class="strong_center">商品合計<i></i></div>

     css代碼

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center i {
    content: " ";
    display: inline-block;
    width: 100%;
}

 以上兩個方法原理一樣！