html - 如何用左填充处理容器内的边距

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

您不必添加margin-right。默认情况下需要，因为没有浮动

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

演示

Answer 2

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

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

Answer 3

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

#container div:first-child {
    margin-left: 0;
}

:first-child 在 IE8 中受支持。last-child 不是。所以我把边距改成了左边

Answer 4

至于浏览器支持，

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

似乎有效地工作。