html - CSS - Div 不以 'Auto: 0 Margin' 为中心

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>

这是我的 fiddle :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