CSS

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-colclass包括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

CSS - Div 未以 'Auto: 0 Margin' 居中

CSS - Divs not centering with 'Auto: 0 Margin'

html

margin

centering