导航栏飞到底部

debugcn 发表于 Dev

标记

我正在尝试在两个图标/徽标下方创建一个导航栏，但它飞到页面底部，或者覆盖了 2 个徽标。http://ddlgaming.com/giga/提供实时版本

到目前为止，这是我的代码：（请忽略一些颜色：白色，这是为了帮助我看得更清楚。）

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>

<body>

<!--Giga logo, top left--!>
<div id="gigalogomainbox">
    <div id="gigalogobox">
        <img id="gigalogo" src="images/gigalogo.png">
    </div>
    <div class="clearfix">
    </div>
</div>

<!--Steam logo, top right--!>
<div id="steamlogomainbox">
    <div id="steamlogobox">
        <img id="steamlogo" src="images/steamlogo.png">
    </div>
    <div class="clearfix">
    </div>
</div>


<!--navigation barrrrrr--!>
<div id="navbarbox">
    <ul id="navbar">
        <li>Home</li>
        <li>Servers</li>
        <li>Community</li>
        <li>Store</li>
        <li>Download</li>
        <li>Contact</li>
    </ul>
</div>
</body>
</html>

CSS：

.clearfix   {
            clear: both;
            }

body
            {
            background-color: rgb(21,14,43);
            background-image: url("../images/backgroundimage.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            min-height: 100%;
            background-position: center center;
            overflow: hidden;
            }

#gigalogomainbox
            {
            float: left;
            width: 30%;
            height: 50vw;
            overflow: hidden;
            transform: skewX(20deg);
            }

#gigalogobox
            {
            margin: 0 3vw 0 5vw;
            padding: 0 0 0 2vw;
            background-color: white;
            width: 80%;
            height: 20%;
            }

#gigalogo
            {
            width: 90%;
            float: left;
            margin: 2.5vw 2vw 0 0;
            }

#steamlogomainbox
            {
            width: 10%;
            height: 50vw;
            float: right;
            overflow: hidden;
            }

#steamlogobox
            {
            margin: 0 -2vw 0 3vw;
            padding: 0;
            width: 100%;
            height: 20%;
            float: right;
            background-color: white; /*000c21*/
            transform: skewX(-20deg);

            }
#steamlogo
            {
            width: 65%;
            float: right;
            margin: 3vw 2vw 0 0;
            transform: skewX(20deg);
            }

#placeholderbartop
            {
            float: left;
            width: 60%;
            margin: 0;
            padding: 0;
            height: 10vw;
            }


#navbarbox          
            {
            width: 100%;
            }
#navbar, #navbar ul
            {
            width: 100%;
            height: 5vw;
            margin: 0;
            color: white;
            background-color: white;
            display: inline-block;
            }

#navbar li
            {
            color: white;
            list-style: none;
            display: inline-block;
            padding: 1vw;
            color: red;
            font-size: 30px;
            }

泽图拉

您在徽标上设置了 50vw 的高度。所以它占用了屏幕高度的一半（50vw = 视图宽度的 50%），你想要的是将高度设置为与图像高度相同（50px？px = 像素）。然后，它将其余部分推到底部。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。