2

我正在尝试使用 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;
}

谢谢你的帮助。

4

2 回答 2

2

添加一些min-width到你的菜单栏

改变css如下

#menubar{
  height: 90px;
  background-color: red;
  min-width: 900px;   /* Give the value as per your need*/
  position: relative;
}
于 2012-08-24T08:43:00.700 回答
0

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

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

您可以通过使用来抵消这种情况，position: absolute;但这也会将它们从文档流中取出，并且很难将它们与周围的其他元素保持在适当的位置。

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

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

于 2012-08-24T08:43:18.697 回答