调整窗口大小时，HTML菜单元素会移动

Question

我正在尝试使用HTML和CSS创建菜单。菜单看起来很好，但是当我重新调整浏览器窗口大小时，菜单项会移动EG：

正常尺寸窗口：  

以下是CSS：

body{
  padding: 0px;
  margin: 0px;

}

.logo{
    float: left;
}
#menubar{
  height: 90px;
  background-color: red;
  position: relative;
}
.mblinks{
  position: relative;
  height: 90px;
  text-align: center;
}
.mblinks li{
  display: inline;
 }
.mblinks li a{
  padding: 16px 30px;
  color: #fff;
  text-decoration: none;
}

感谢您的帮助。

Answer 1

在您的菜单栏中添加一些min-width

更改css如下

#menubar{
  height: 90px;
  background-color: red;
  min-width: 900px;   /* Give the value as per your need*/
  position: relative;
}

Answer 2

这是因为您的li设置为.mblinks li{ display: inline; }。

这将使列表项显示为文本，因此当修改窗口宽度时，项目将移动到适合其父项的范围内。

你可以使用position: absolute;来抵消这种情况，但是这也会将它们从文档流程中移除，并使它们更难以与周围的其他元素保持一致。

请记住，此行为是一项功能，而非错误。

您可以在float: left;上使用li，但元素移动将大致相同。