导航栏正在转移

Question

您好我正在使用html＆amp; css我的导航栏有问题。当我减小浏览器大小时，导航栏上的文本正在移动。这里是pic

我的css代码：

    .menu{
      margin-top:4em;
      width:100%; 
      height:4em;
      font-size:0.813em;
      list-style-type:none;
      background: rgba(255, 255, 255, 0.75);
      position:fixed;

   }
.menu li{
     float:right;
     padding:1em 1em;
     display:inline; 

     }

我该如何预防这种情况？ 感谢。

Answer 1

您需要使用css媒体查询。例如

@media (min-width: 768px) {    
    .h1 {
        font-size: 21px;
    }
}

@media (min-width: 480px) {
    .h1 {
        font-size: 16px;
    }
}

为不同的屏幕尺寸设置导航栏的不同宽度。

Answer 2

这是因为你的width导航栏和de list-items ..当de 5 list-items比导航栏的总width宽时，它可以在你身上崩溃image。为防止这种情况，您可以使用min-width

.menu{
    ....
    min-width: 500px;
}