CSS - Divs 不以“自动：0 边距”为中心

Question

我正在尝试在 CSS 中创建一个菜单栏，主按钮（蓝色 div）应该在导航栏（橙色 div）内居中，并且每个按钮之间的间距也相等。

由于某种原因，使用margin: 0 auto 不起作用。

这是我的代码：

.nav {
    height: 40px;
    width: 80%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    background-color: lightsalmon;
}

.nav__btn-cont {
    width: 20%;
}

.nav__btn {
    height: 50px;
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    margin: 0 auto;
    background-color: lightblue;
}

---

<div class="nav">
        <div class="w3-row">
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
        </div>
    </div>

这是我的小提琴：http://jsfiddle.net/zpoqjc5s/

我很想知道是否有人可以在这里指出我正确的方向，感谢任何帮助或建议，提前谢谢你。

请注意，我使用的是 bootstrap 和 w3.css

Answer 1

W3.css 中的w3-col 类包括float:left。

.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
    float: left;
}

...为您的按钮删除它

    .nav__btn {
        height: 50px;
        width: -moz-calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: calc(100% - 20px);
        margin: 0 auto;
        background-color: lightblue;
        float:none; /* added this */
    }

JSFiddle Demo