Question

我正在尝试在CSS中创建一个菜单栏，主要按钮（蓝色div）应该在导航栏（橙色div）内居中，每个按钮也留下相同的spave。

由于某些原因，使用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

CSS - 不以“自动：0保证金”为中心的Div

1 个答案: