Css 删除一组浮动按钮中的边距

我的页面上有一个指定宽度的容器；这样可以使页面上的所有按钮居中

我在按钮上使用了

margin right

，但我无法用按钮填充容器，使其与容器边对边，否则它们会重新调整，网格将变为3x4，而不是所需的4x3

那么，如何去掉按钮末尾的空格（边距）？显然，我不能使用

：last child

选择器

<div id="container">
    <div id="months">
        <div class="month-button jan" data-month="January"></div>
        <div class="month-button feb" data-month="February"></div>
        <div class="month-button mar" data-month="March"></div>
        <div class="month-button apr" data-month="April"></div>

        <div class="month-button may" data-month="May"></div>
        <div class="month-button jun" data-month="June"></div>
        <div class="month-button jul" data-month="July"></div>
        <div class="month-button aug" data-month="August"></div>

        <div class="month-button sep" data-month="September"></div>
        <div class="month-button oct" data-month="October"></div>
        <div class="month-button nov" data-month="November"></div>
        <div class="month-button dec" data-month="December"></div>
    </div>
</div>

您可以使用将每四个元素的右边距归零：

.month-button:nth-child(4n) {
    margin-right:0;
}

如果您需要支持旧浏览器，那么我建议手动为每4个元素添加一个类，例如

零右边距

：

.zero-right-margin {
    margin-right:0;
}

---

试着用这样的东西

#months{ /* This is the wrapper of your buttons */
    margin-right: -87px; /* Negative of buttons right margin */
}

---

如果您无法像上面提到的那样支持IE8，那么最好将每一行分离到它自己的容器中

IE8不支持

:n子类

或

:last子类

，但它支持

[：first child][1]

伪类。您可以将页边距放在左侧而不是右侧，然后使用

[：first child][2]

仅删除第一次出现的页边距

HTML:

<div id="container">
    <div id="months">
        <div class="row">
            <div class="month-button jan" data-month="January"></div>
            <div class="month-button feb" data-month="February"></div>
            <div class="month-button mar" data-month="March"></div>
            <div class="month-button apr" data-month="April"></div>
        </div>
        <div class="row">
            <div class="month-button may" data-month="May"></div>
            <div class="month-button jun" data-month="June"></div>
            <div class="month-button jul" data-month="July"></div>
            <div class="month-button aug" data-month="August"></div>
        </div>
        <div class="row">
            <div class="month-button sep" data-month="September"></div>
            <div class="month-button oct" data-month="October"></div>
            <div class="month-button nov" data-month="November"></div>
            <div class="month-button dec" data-month="December"></div>
        </div>
    </div>
</div>

.month-button {
    width: 115px;
    height: 26px;

    background: url("/__resources/images/months.png");
    cursor: pointer;
    float: left;
    margin: 8px 0px 0px 87px;
}
.month-button:first-child {
    margin-left: 0;
}

---

你能发布你的按钮的标记吗？使用所有这些类的原因是什么

class=“month button jan”

你就不能

#months>div

？：？现在我们可以期待很快会有另一个问题。那么

（3n）

和

（4n）

：）之间的差距是什么呢？只要您不需要介绍ie8，这就行了。此外，OP还需要重新调整边距，以便每个按钮之间的空间适合nicely@Huangism我想我可能也需要它来为IE8工作（不幸的是，客户偏好：/）@silkfire它可能需要还是需要？你需要找到需求。如果你的按钮总是排成4排，那么你最好把它们排成3排rows@Huangism我自己也一直在运行Chrome，但我们有一些客户使用过时的浏览器（即hint-hint），因为他们的母公司对浏览器和版本的使用非常严格。

.month-button {
    width: 115px;
    height: 26px;

    background: url("/__resources/images/months.png");
    cursor: pointer;
    float: left;
    margin: 8px 0px 0px 87px;
}
.month-button:first-child {
    margin-left: 0;
}