好的,所以我构建了我的导航栏,它看起来就像我想要的那样,但是如果我让窗口小于我的屏幕的75%,那么就会把我的css抛到窗外。如何更有效地编码,以便导航栏保持较小的尺寸?感谢任何帮助,我对此非常陌生。
的CSS:
div#hmenu {
margin: 0;
padding: .3em 0 .3em 0;
/*background: #ddeebb; */
width: 100%;
text-align: center;
}
div#hmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
div#hmenu ul li {
margin: 0;
padding: 0;
display: inline;
}
div#hmenu ul a:link{
margin: 0;
padding: .3em 1em .3em 1em;
text-decoration: none;
font-size: medium;
color: #ffffff;
}
div#hmenu ul a:visited{
margin: 0;
padding: .3em 1em .3em 1em;
text-decoration: none;
font-weight: bold;
font-size: medium;
color: #ffffff;
}
div#hmenu ul a:hover{
margin: 0;
padding: .3em 1em .3em 1em;
text-decoration: none;
font-size: medium;
color: #000000;
background-color: #FFFFFF;
}
下面的HTML:
<!--- my nav bar -->
<div id="hmenu">
<ul>
<li><a href="#home_new.php">Home</a></li>
<li><a href="#home_copy_mp2.php">Explore our Collection</a></li>
<li><a href="#about_our_site.php">About the archive</a></li>
<li><a href="#our_staff.php">Our Staff</a></li>
<li><a href="#donate.php">Donate</a></li>
<li><a href="#exhibitions.php">Exhibitions</a></li>
<li><a href="#contact.php">Contact</a></li>
</ul>
</div>
&#13;
答案 0 :(得分:1)
我修好了!
我忘记了我之后在@media
进入了css(正在玩jumbotron)并忘记完全评论它。你的评论让我检查并看到我的错误。因此媒体查询既可以解决也可以创建问题......
@media screen and (min-width: 1370px) {
body.hero-image #main > .hero-container .img-wide {
display: inline;
}
}