时间戳

首页 > 解决方案 > 当屏幕尺寸发生变化时，如何调整菜单栏的大小？

html - 当屏幕尺寸发生变化时，如何调整菜单栏的大小？

问题描述

我想在屏幕调整大小时调整顶部菜单栏的大小。我尝试了通常的@media screen 方法，但它似乎不起作用。请帮我找到解决方案？

这是HTML：

<p id='nav-menu' style='text-align:center; '>
  <a href="#">Food & Drink</a>
  <a href="#">Arts</a>
  <a href="#">Culture</a>
  <a href="#">Active</a>
  <a href="#">Areas</a>
  <a href="#">About</a>
</p>

谢谢

标签： htmlcssresize

解决方案

感谢您的回复。我尝试了 flex 并且它有效，但我不想将它们排列在一个列中。我尝试过的其他功能似乎不起作用（即应用固定宽度）。

我用来格式化它们的 CSS 如下 - 其中是否有干扰 @media 功能的东西？

#nav-menu {font-size:16px; line-height:32px; 
                width:720px; height:32px; margin:0 auto; padding:0;}

#nav-menu a {display:block; text-decoration: none; color:#000000; width:100px; height:32px; margin:0 0px 0 10px; float:left; border: 3px solid #808080}

谢谢

推荐阅读