0

タグ内にulとタグを使用してメニューを作成しました。ildiv

<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">News</a></li>
    </ul>
</div>

..次のスタイルがメニューに適用されます。

.menu
{
    background-position: center;
    clear: left;
    float: left;
    padding: 0;
    background: #CBC396 url(metaltop-gray.gif) repeat-x top;
    border-bottom: 4px solid black;
    border-top: 1px solid #7E7567;
    width: 100%;
    overflow: auto;
    font-family: Verdana, sans-serif;
    border-top-color: #CCCCCC;
    border-bottom-color: black;
}
.menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
.menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background: #CBC396 url(metaltop-gray.gif) top repeat-x;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
.menu ul li a:hover {
   background:#369;
   color:#fff;
}
.menu ul li a.active,
.menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Google Chrome でページを実行してページのサイズを変更すると、メニューが消えます。また、このメニューは IE では表示されません。何が間違っている可能性がありますか？
===================編集======================== ページが表示されたら
画像をご覧ください
フルスクリーンメニューは大丈夫です
ここに画像の説明を入力

しかし、ページのサイズを変更
ここに画像の説明を入力
すると、画像に表示されているようにページがこのようになり、メニューが非表示になり、スクロールしません

そして、私が言及したように、IEメニューでは決して表示されません!!!

4

2 に答える 2

1

このコードを試してみてください。うまくいくかもしれません。変更するだけ.menuです。

.menu {
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid #CCCCCC;
  border-bottom: 4px solid black;
  width: 100%;
  clear: left;
  float: left;
  overflow: visible;
  font-family: Verdana, sans-serif;
  background: #CBC396 url(metaltop-gray.gif) repeat-x top;
}

これを試してみてください。すべてのブラウザで正常に動作するはずです。

<div class="menuwrapper">
<div class="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">News</a></li>
</ul>
</div>
</div>

と

.menuwrapper {
 background: #CBC396 url(metaltop-gray.gif) repeat-x top;
 width: 100%;
 height: auto;
 padding: 0;
 margin:0;
 border-top: 1px solid #7E7567;
 border-top-color: #CCCCCC;
 border-bottom-color: black;
 border-bottom: 4px solid black;

 }

.menu
{
    margin: 0 auto;
    padding: 0;
    background: #CBC396 url(metaltop-gray.gif) repeat-x top;
    width: 340px;
    overflow: auto;
    font-family: Verdana, sans-serif;
}
.menu ul {
   float:left;
   list-style-type:none;
   margin:0;
   padding:0;
   text-align:center;
}
.menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
}
.menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background: #CBC396 url(metaltop-gray.gif) top repeat-x;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
.menu ul li a:hover {
   background:#369;
   color:#fff;
}
.menu ul li a.active,
.menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}
于 2012-05-25T13:45:15.053 に答える
0

それは私のマシンでは正常です。すべてのコードを投稿していない可能性があります。すべての "position:relative" とすべての配置プロパティを削除すると役立ちます。

メニューを真ん中に揃えたいと思います このコマンドを使うとより良くなります。

.menu ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width: 350px;
 }
.menu ul li {
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
 }

あなたのコードはこれを私のマシンに表示し、クロムでも同じサイズで表示します。私は助けたいのですが、あなたの問題が何であるかわかりません。

ここに画像の説明を入力

于 2012-05-25T13:22:07.463 に答える