Question

我正在尝试创建一个导航栏低于两个图标/徽标，但它会飞到页面底部，或覆盖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;
            }

Answer 1

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

Answer 2

这就是你要找的东西吗？

＆＃13;

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;
}
#navbarbox			
{
  width: 100%;
}
#navbar, #navbar ul
{
  width: 90%;
  height: 70px;
  margin: 0;
  color: white;
  background-color: white;
  display: inline-block;
}
#gi {
  margin-top: -10px;
  width:80px;
  height: 50px;
  line-height: 50px;
  vertical-align:middle;
}			
#steam{
  margin-top: -10px;
  width: 80px;
  height: 60px;
  line-height: 70px;
  vertical-align: middle;
}
#navbar li
{
  color: white;
  list-style: none;
  display: inline-block;
  padding-top:15px;
  padding-right: 1%;
  color: red;
  font-size: 80%;
}

＆＃13;

<div id="navbarbox">
  <ul id="navbar">
    <li><img id="gi"     src="http://ddlgaming.com/giga/images/gigalogo.png"></li>
    <li>Home</li>
    <li>Servers</li>
    <li>Community</li>
    <li>Store</li>
    <li>Download</li>
    <li>Contact</li>
    <li><img id="steam" src="http://ddlgaming.com/giga/images/steamlogo.png"></li>
  </ul>
</div>

＆＃13;

导航栏飞到底部

2 个答案: