如何修复 Header-right

Question

我正在尝试创建此导航菜单，但在我添加徽标时似乎总是出现问题。 header-right 不断向下移动。我尝试了不同的方法，但 none 似乎有效。也许你能看出我的错误。

这是我的JSFiddle

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #ccc;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
.header {
    background: -webkit-linear-gradient(#25292C, #1E2224);
    background: -o-linear-gradient(#25292C, #1E2224);
    background: -moz-linear-gradient(#25292C, #1E2224);
    background: linear-gradient(#25292C, #1E2224);
    height: 100px;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.header-cover {
    width: 780px;
    height: 100px;
    margin: auto;
}
.header-left {
    width: 240px;
    float: left;
    height: 100px;
}
.header-right {
    width: 240px;
    float: right;
    height: 100px;
}
.bar {
    width: 120px;
    height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.logo {
    height: 50px;
    width: 50px;
    margin: auto;
}
.logo img {
    padding-top: 15px;
    display: block;
    margin: auto;
    position: relative;
    z-index: -1;
}
.top {
    height: 0px;
    width: 120px;
    background-color: #535557;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.text {
    font-family: roboto;
    font-size: 21px;
    color: #fff;
    text-align: center;
    margin-top: 35px;
    letter-spacing: 1px;
    position: relative;
    z-index: 10;
}
.bar:hover .top {
    padding-bottom: 20px;
}
.bar:hover .text {
    color: #fff;
}

HTML

<!DOCTYPE HTML>
<html>
    <head>
<title>Website NabBar Template</title>
            <link rel="stylesheet" type="text/css" href="css/navbar.css">
            <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
            <link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="header">
            <div class="header-cover">
                <div class="header-left">
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">HOME</div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">SHOP</div>
                        </div>
                    </a>
                </div>
                <div class="logo">
                    <img src="http://i.imgur.com/Gghu413.png"/>
                </div>
                <div class="header-right">
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">STAFF</div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">FORUMS</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

因为你用的是CSS属性display: block，而header-coverdiv用的是display: relative。结合每个 header 元素的 float: left 和 float-right，按照您显示的顺序，徽标高度向下推包含 .header-right 的 div

尝试像这样组织您的 header：

           <div class="header-cover">
                <div class="header-left">
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">HOME</div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">SHOP</div>
                        </div>
                    </a>
                </div>
                <div class="header-right">
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">STAFF</div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="bar">
                            <div class="top"></div>
                            <div class="text">FORUMS</div>
                        </div>
                    </a>
                </div>
                <div class="logo">
                    <img src="http://i.imgur.com/Gghu413.png"/>
                </div>
            </div>

这样，带有 margins: auto 的徽标会在左右 header 部分之后呈现。

新建Fiddle

如何修复 Header-right

How to fix Header-right

header

navigation

navbar

jsfiddle