html - 导航栏正在移动

Question

您好，我正在使用 html 和 css 制作网站 我的导航栏有问题。当我减小浏览器尺寸时，导航栏上的文本正在移动。在这里图片

还有我的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

这是因为导航栏的 width 和 de list-items.. 当 de 5 list-items 加起来比导航栏的总 width，它可以像你的 image 一样折叠。为防止这种情况，您可以使用 min-width

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