Question

我的页面上有一个指定宽度的容器;这样就可以将页面上的所有按钮居中。

我在按钮上使用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>

CSS：

#container {
    width: 900px;
    margin: 10px auto;
}

#months {
    margin: 10px 5px 21px;

    float: left;
}

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

    background: url("/__resources/images/months.png");
    cursor: pointer;
    float: left;
    margin: 8px 87px 0px 0px;
}

enter image description here

Answer 1

您可以使用nth-child将每个第4个元素的右边距归零：

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

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

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

Answer 2

尝试使用类似的东西。

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

Answer 3

如果您如上所述坚持支持IE8，那么您最好将每一行分成它自己的容器。

IE8不支持:nth-child或:last-child，但它支持[: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>

<强> CSS：

.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;
}

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

3 个答案: