Question

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

＆＃13;

<!--- 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;

Answer 1

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

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

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

1 个答案: