Question

我试图将导航栏居中，同时使用固定宽度来放大屏幕。基本上我想将蓝色区域置于网格中心，而不是让它离开左边缘。同时我需要左右两侧分别左右浮动。

HTML

<div class="navbar">
<div class="navbar-left">
    <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
</div>
<div class="navbar-right">
    <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
    <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
</div>
</div>

CSS

.navbar {
background-color: #f8f8f8;
position: fixed;
width: 100%;
max-width: 1140px;
z-index: 1;
font-size: 14px;
min-height: 64px;
list-style: none;
text-align: center;
float: none;
}

.navbar-brand {
float: left;
}

.navbar-arrow {
float: right;
}

Answer 1

如果你可以删除位置：固定，那么你可以尝试保证金：0自动; 喜欢这里

<html>
    <head>
        <style>
.navbar {
    background-color: #f8f8f8;
    width: 100%;
    max-width: 1140px;
    z-index: 1;
    font-size: 14px;
    margin:0 Auto;
    min-height: 64px;
    list-style: none;
    text-align: center;
    float: none;
}

.navbar-brand {
    float: left;
}

.navbar-arrow {
    float: right;
}
        </style>
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-left">
                <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
            </div>
            <div class="navbar-right">
                <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
                <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
            </div>
        </div>
    </body>
</html>

使用固定宽度时居中导航栏

1 个答案: