1

Mega Menu Reloaded Onを自分のWebサイトに実装していますが、さまざまな画面解像度でdivタグを適切に配置できません。

これが：それがどのように見えるべきか

メガメニューのCSSの一部を書き直した後の様子です。

私はこの問題を修正するために数時間試みましたが、cssの初心者として、私はそれを修正することができていないようです。

これは、その配置に関連して必要なcssだと思います

.megamenu_fixed {

width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}

これが正しい配置での位置のコードです

#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }

助けてくれて、または正しい方向に私を向けてくれてありがとう。:)

4

1 に答える 1

2

絶対配置の代わりに相対配置を使用してみてください。また、それが失敗した場合は、左をパーセンテージ (つまり、約 50% がメニューの開始点) として指定し、幅もパーセンテージ (100% を指定すると、最も左のポイントからdiv最も右のポイントまでのみを使用するようにする必要があります) を試してください。そうでない場合は、50% の幅を試してください)。

問題は CSS ではなく、HTML にあると思います (まあ、'Adults' が隠れている部分を修正しましたが、これは構文エラーでした)

spanAdults が宣言されている場所がタイプミスされています。<span class="drop"><adults< span="">(問題のコード) をandに置き換えて<span class="drop">adults</span>、「Adults」が正しく表示されるようにしました。ただし、右に少し押しつぶされていますが、それは「悪い」バージョンのページの左上にある画像が原因であると思いますが、「良い」バージョンにはありません。

PS: 人々が同様の問題を抱えている可能性があるため、古い回答をそこに残しました。実際には、CSS に問題があります。「トピックから外れている」と思われる場合はお知らせください。削除します


更新:ああ、言い忘れたことですが、押しつぶされたメガメニューを修正するには、CSS の場所を編集するだけで、通常の状態に戻ります。

または、div を (ほぼ) 完全に破棄して、代わりにテーブルを使用することもできます。時々混乱するかもしれませんが、私の意見では、それだけの価値があります。セルを結合/分割することはできません（分割するには、テーブル内にテーブルを作成するだけです）。microsoft word や openoffice Writer などを使用して、テーブル内にテーブルを作成し、グラフィカルな「ベース レイアウト」を作成して、必要なコードを見つけやすくします。出発点は次のとおりです: gitHub でテーブルを使用してレイアウトをフォーマットする

于 2012-08-27T02:39:35.660 に答える