在動態列表周圍填充相同的填充並從第一行和最後一行刪除填充

Question

我需要在每個li周圍創建一個具有相同填充的動態列表。 我不知道如何解決的問題是在列表項周圍的多個填充相鄰。所以如果一個元素有30px的填充，那麼下一個元素之間的空間將是60px（每個元素爲30px）。我需要它是30px。

我最大的問題是，我不想頂部填充的第一行，因爲我想列表關閉標題。

我使用響應式設計，並且該列表將被動態加載。所以我不知道將有多少列表項和多少行。

這就是我想要實現

這小提琴是不是最好的（LIST_ITEM應該是33.3％） - http://jsfiddle.net/urjzsr73/1/

<div style="background: green; height: 70px"></div> 
<div class="list_container"> 
    <ul> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
     <li class="list_item"> 
      <div class="item_container">a 
      </div> 
     </li> 
    </ul> 
</div> 

<div style="background: green; height: 70px"></div> 

CSS：

.list_container{ 
    background: yellow; 
} 
ul{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
.list_item{ 
    display: inline-block; 
    width: 32.9%; 
    padding: 3% 

} 

.item_container{ 
    background: green; 
    display: table; 
    width: 100%; 
    height: 100px; 

} 

Answer 1

1）在所有項目上添加1.5％填充

2）刪除È1.5％從上頂，LHS和rhs的物品填充與nth-child

/* first three items */ 
.list_item:nth-child(-n + 3){ 
    padding-top: 0; 
} 
/* items on the left */ 
.list_item:nth-child(3n + 1){ 
    padding-left: 0; 
} 
/* items on the right */ 
.list_item:nth-child(3n){ 
    padding-right: 0; 
} 

3）爲了除去底部填充 - 只需添加一個負緣至ul

ul{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    box-sizing: border-box; 
    padding: 0 3%; 
    margin-bottom: -3%; /* <-- */ 
} 

FIDDLE