我设置了一个非常基本的网站,其中包含#navbar和#content的#container div。但是,当我放大或缩小时,#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。是对的吗?还有一点你必须指出,请让我知道。
提前致谢!
解决方法
原文地址:https://www.jb51.cc/css/218183.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。