2

HTMLとCSSでメニューを作成しようとしています。メニューは問題ないように見えますが、エクスプローラーウィンドウのサイズを変更すると、メニュー項目が移動します。

通常サイズのウィンドウ： 通常サイズのウィンドウ：

サイズ変更されたウィンドウ：

以下は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がに設定されているため.mblinks li{ display: inline; }です。

これにより、リストアイテムがテキストとして表示されるため、もちろんウィンドウ幅を変更すると、アイテムは親の範囲内に収まるように移動します。

を使用してこれを打ち消すことができますが、これによりposition: absolute;、ドキュメントフローからそれらが削除され、周囲の他の要素との位置を維持することが非常に困難になります。

この動作は機能であり、バグではないことを忘れないでください。

で使用できfloat: left;ますliが、要素の動きはほとんど同じです。

于 2012-08-24T08:43:18.697 に答える