我已经建立了一个非常基本的站点,其中包含一个#container div,其中包括#navbar 和#content。但是,当我放大或缩小时,#navbar 会扭曲,如果我放大链接会被推到彼此下方而不是内联。如果我缩小,链接之间会添加太多的填充。我怎样才能阻止这个?
HTML:
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="top.html">Top</a></li>
<li><strong><a href="free.html">FREE</a></strong></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<p>Some sample text.<p>
</div>
</div>
CSS:
#container {
position: static;
background-color: #00bbee;
margin-left: 20%;
margin-right: 20%;
margin-top: 7%;
margin-bottom: 15%;
border: 2px solid red;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
}
#navbar li a{
text-decoration: none;
color: #11ff11;
margin: 3%;
border: 1px dotted orange;
padding-left: 4px;
}
#navbar li a:hover {
background-color: white;
color: green;
}
#navbar {
background-color: #eeeeee;
padding-top: 2px;
padding-bottom: 5px;
border: 1px solid yellow;
}
我怎样才能阻止它扭曲?
另外,我对 CSS 还是很陌生,我被教导使用 % 而不是 px。那正确吗?还有什么你要指出的,请告诉我。
提前致谢!