css - 如何更改靠近左边缘的元素的 margin-left

Question

这是我正在尝试做的事情:我有一个包装盒 .box-body 并且我想将靠近左边缘的所有元素的 margin-left 更改为 0 .

在我关于 http://jsfiddle.net/8NXMq/6/ 的示例中我希望带有 views.py 和 context_processors.py 的盒子有 margin-left: 0，但其余的保持不变，我在想创建额外的类并覆盖此属性，但这不是我想要做的，因为我不知道我将拥有的盒子数量可能是 7，可能是 20 ....加上如果你调整一行中框的窗口数会发生变化。

这是CSS:

.box-body {
    background: #ddd;  
    width: 700px;
    height: 300px
}

.app-file {
    position: relative;
    float: left;
    margin: 10px 0 0 14px;
    display: inline-block;
    padding: 10px 18px 10px 18px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    background: rgba(255,255,255, 0.9);
    color: rgb(68,68,68);
}

Answer 1

您可以只在框体上添加一个负边距。像这样:http://jsfiddle.net/8NXMq/7/

CSS:

.box-body {
    background: #ddd;  
    width: 714px;
    height: 300px;
    margin-left: -14px;
}

这将使整个主体框向左移动 14px。由于它在视口(viewport)之外，因此不可见。请注意，我还向宽度添加了 14px，以将框的可见尺寸保持在 700px。