如何处理左边有填充的容器里的右边空白

Question

我有一个公共设置，一个div，里面有一个填充内容，它有一个padding-right属性来分隔它们。当项目靠近右侧边缘时，将应用父div的padding-right和整体填充(将是padding-left(。我该如何克服这个问题？

#container {
    padding: 20px;
}
#container div {
    margin: 0 5px 5px 0;
    width: 100px;
    display: inline-block;
}
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 1

作为您场景的快速解决方案，我将添加：

#container:last-child {
    margin : 0;
}

Answer 2

您不必添加边距权限。由于没有浮动，默认情况下需要

#container div {
    margin: 0 0 5px 0;
    width: 100px;
    display: inline-block; border:green solid 1px
}

DEMO

Answer 3

#container div {
    margin: 0 0px 5px 5px;
    width: 100px;
    display: inline-block;
}
#container div:first-child {
    margin-left: 0;
}

：IE8支持第一个孩子。最后一个孩子不是。因此，我已将边距更改为左

Answer 4

至于浏览器支持，

#container > div:last-of-type {
    margin-right: 0;
}

似乎有效。