如何修复页眉右侧

我正在尝试创建这个导航菜单，当我添加徽标时，似乎有什么东西一直在出错。收割台右侧不断向下移动。我尝试过不同的方法，但似乎都不起作用。也许你能看到我的错误。

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

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

试着这样组织你的标题：

           <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得到渲染后，你的左右标题部分。

新Fiddle

相关内容

最新更新

热门标签：