1

私の水平メニューは、私のコンピューター、iPhoneではうまく機能しますが、Androidフォンではうまく機能しません。

ブラウザのサイズが小さい場合、メニューには2行が必要です。私のAndroidスマートフォンでは、2行が重なっている1行しか表示されません。しかし、携帯電話でページを更新すると、メニューが正しい方法で表示されます。

誰かが何が悪いのか知っていますか?

これはウェブサイトですhttp://nederlandoverzicht.nl/cs

これは私のメニューのCSSコードです

#menu ul{list-style-type:none;
width: 90%;
margin: 0px auto;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
text-align:center;
}

#menu ul li{
display: block;
width:33.3333333334%;
color:#fff;
padding-top:10px;
font-size:12px;
float:left;
font-family:"Tahoma";}

#menu{background-color:#bd4545;
border-radius: 5px;
height:58px;
width:100%;}
4

1 に答える 1

0

現在のコードを見ると、すべての<li>タグがテーブルセルとして表示されています。それらをどれだけ広く設定しても、<ul>withdisplay:table;は、テーブル行として表示するように設定されたコンテナーに分割されていないため、それらすべてを1つの行に収めようとします。

採用するソリューションに応じて、通常はすべてdisplay:inline-block;16.6%の幅で作成し、メディアクエリを使用してモバイルデバイスを検出し、幅を33.3%に変更して、リンクを3行2行に強制します。

于 2012-10-16T16:45:31.117 に答える