如何通过调整浏览器窗口大小来制作导航栏

时间:2016-04-18 01:41:56

标签: html css

我的导航栏保持原始大小,并且在调整浏览器大小时无法缩放。我希望酒吧居中并与页面的主体保持80%的宽度。最大宽度为1900px,最小宽度为700px你知道我做错了吗?

相关HTML:

<div id="hnav">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="work.html">WORK</a></li>
<li><a href="resume.html">RESUME</a></li>
<li><a href="jordanblog.html">JORDAN BLOG</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>

相关CSS:

#hnav {white-space: nowrap;
max-width: 1900px;
min-width: 700px;
text-align: center;
height: 90px;
}

nav ul {list-style-type: none;
position: fixed, center;
padding-top: 0;
width: 100%;
margin: 0px;
padding:0;
background-color: #ffffff;
}

nav li { display: inline;
}

nav {text-align: center;
list-style: none;
font-size: 24px;
}

nav a { font-family: arial, verdana;
color:#000000;
text-decoration: none; 
padding: 50px;
display: inline-block;
}

nav a:hover { text-decoration: none;
color: #bfbfbf; 
}
nav a:focus { text-decoration: none;
color: #bfbfbf;
}

nav a:active { text-decoration: none;
background-color: #000000;
color: #cccccc;
}

谢谢!

1 个答案:

答案 0 :(得分:0)

在css中创建任何内容时始终尝试使用%,因为不同的监视器将更改网站的大小。我不知道好像最大宽度和高度是必要的,因为你有推杆,导航条总是100%应该没问题。最有可能的是,否则像素大小的其他东西是错误的。

希望这有帮助!