动态列表周围的相同填充，并从第一行和最后一行删除填充

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）用nth-child

从顶部，lhs和rhs上的项目中删除1.5％填充

/* 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