如何在较小的窗口上动态调整导航栏的大小?

时间:2015-05-13 00:07:35

标签: html css navbar

好的,所以我构建了我的导航栏,它看起来就像我想要的那样,但是如果我让窗口小于我的屏幕的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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我修好了! 我忘记了我之后在@media进入了css(正在玩jumbotron)并忘记完全评论它。你的评论让我检查并看到我的错误。因此媒体查询既可以解决也可以创建问题......

@media screen and (min-width: 1370px) {
    body.hero-image #main > .hero-container .img-wide {
        display: inline;
    }
}