在前端開發中一些列表我們經常需要設定浮動和間距margin來使他們他們顯示在一行（類似首頁的最新文章），但有時候老是要考慮到他們的間距和在父元素的顯示是否居中，有沒有一種簡單的方法呢？答案是肯定的，一次看某個網頁的原始碼時看到了一種新的方法。

把這些小盒子設定display為inline-block,父級元素中設定text-align為justify（設定字型方向為兩端對齊），這樣那些小盒子就會自動兩端對齊了，但前提是一行裡已經放不下父元素裡所有的內容，假設有三個盒子，而每個盒子的寬度為30%，這三個盒子能在一行裡顯示，就看到自動間距的效果。

這種我們可以再最後加個div設定它的寬度為100%、高度為0；於是得到下面的程式碼。

/*
**css
*/
.content{
  width:95%;
  margin:0 auto;
  text-align:justify;
}
.box{
  display:inline-block;
  width:30%;
  height:260px;
  margin-top:20px;
  background:#000;
}

<!-- HTML -->
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class=
 
"box"></div>
<div style="width:100%;height:0;"></div>
</div>

上面的方案貌似沒問題，但是很快我們會發現當有五個元素的時候，第二行顯示的間距不和第一行對齊，這是由於第二行只有兩個元素，字型方向為兩端對齊，所以自然就在第二行等距離分佈了。這時我們得對程式碼做一下優化，在最後面的<div>改為與box等寬度的div數量增加為每行顯示的box的數量。

最終程式碼

/*
**css
*/
.content{
  width:95%;
  margin:0 auto;
  text-align:justify;
 

}
.box{
  display:inline-block;
  width:30%;
  height:260px;
  margin-top:20px;
  background:#000;
}
.just-div{
  width:30%;
  height:0;
}

<!-- HTML -->
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="just-div"></div>
<div class="just-div"></div>
<div class="just-div"></div>
</div>