0

我遇到了一个问题。

我知道这可能是一个菜鸟错误，但请耐心等待。

我在顶部制作了两个顶部栏菜单，我可以使用绝对定位和顶部放置它们，但是当浏览器大小发生变化时，它会使顶部栏看起来一团糟。

有没有办法在不使用绝对位置和顶部的情况下放置这些？

这就是我目前拥有的：
HTML

<div id="nav">
<div class="logo"><h1>Health Numeric ©</h1>Live a Something Life</div>
<div style="display:inline-block">
<ul>
    <li><a href="#"><img class="icons" src="img/icons/dashboard.png" />Dashboard</a></li>
    <li><a href="#"><img class="icons" src="img/icons/patient.png" />Patients</a></li>
    <li><a href="#"><img class="icons" src="img/icons/devices.png" />Devices</a></li>
    <li><a href="#"><img class="icons" src="img/icons/account.png" />Account</a></li>
    <li><a href="#"><img class="icons" src="img/icons/support.png" />Support</a></li>
</ul>
</div>
<div class="end"><strong>LifeView</strong> Portal</div>
</div>
<div id="subnav">
<span class="clientname">Patient: Brian Town</span>
</div>

<div id="bod">
<h1> test</h1>
</div>

CSS

#nav h1 {
font: Verdana, Geneva, sans-serif;
font-size: 24px;
margin-bottom: 2px;
}
.logo {
width: 190px;
margin:  auto 80px auto 50px;
display: inline-block;
vertical-align: top;
}
#nav {
position: fixed;
/*height: 65px;*/
width: 100%;
float: left;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0389FF), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #0389FF 0%, #000000 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #0389FF 0%, #000000 100%);
}
#nav ul {
list-style: none;
width: 450px;
margin: 0 auto;
padding: 0; 
}
#nav li {
float: left; 
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 1px solid #ccc;   
}
#nav li:first-child a {
border-left: 1px solid #ccc; 
}
#nav li a:hover {
color: #23afff;
}
.end {
width: 200px;
margin: 10px auto auto 50px;
display: inline-block;
word-spacing: 20px;
vertical-align: top;
}
strong {
font: Verdana, Geneva, sans-serif;
font-size: 36px;
margin-bottom: 2px;
}
.icons {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
height: 35px;
width: 35px;
}
#subnav {
position: fixed;
overflow:hidden;
height: 20px;
width: 100%;
float: left;
left: 0px;
/*top: 65px;*/
margin: 0px;
padding: 0px;
border: 1px solid #333;
border-bottom: 1px solid #ccc;
color: #000000;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #666666 0%, #FFFFFF 100%);
}
.clientname {
float: right;
margin-right: 120px;
color: #000000;
font-weight: bold;
}
#bod {
position: absolute;
width: 100%;
float: left;
left: 0px;
top: 85px;
margin: 0px;
padding: 0px;
color: #000000;
}

这是一个 JSfiddle：http: //jsfiddle.net/Artsen/HYZLR/

谢谢

4

0 回答 0