0

実際、これはブロガーの開発中に遭遇した問題です。

自分でナビゲーションバーを書きたいのですがwidth:100%、float プロパティを設定しても、親要素の幅によって style が制限されます。ここに画像の説明を入力

上の画像をご覧ください。navの HTML/JS/CSS のみが構成可能です。navでは、この目標を達成するためにクラスの CSS スタイルを構成するにはどうすればよいでしょうか?

または、ブロガーの開発に関連する経験があれば教えてください。

どうもありがとう！

4

3 に答える 3

1

あなたのナビゲーションに絶対位置を使用してください。このフィドルを見てください

html :

<div class="first">0</div>
<div>
    1
    <div class="nav">NAV</div>
</div>
<div>2</div>

css:

div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }

編集

あなたのナビゲーションはposition:relative;井戸にあり、そのjqueryを使ってあなたのナビゲーションをあなたの体に追加することができます（HERE THE FIDDLE UPDATED）：

$(".nav").appendTo("body");
于 2013-10-08T09:28:04.240 に答える
1

そのような「階層化」を実現するには、特にオプションが限られている場合は、おそらく絶対配置を使用する必要があります。これには、ページの流れから除外するという明らかな注意事項があるため、ページが短すぎて表示されないようにする必要があります。周囲の他の要素にも影響しません。

したがって、次のようなものです：

nav {
    left: 0;
    position: absolute;
    top: 400px;
    width: 100%;
}

うまくいけば、その親の 1 つが を持っているposition: relative;ので、nav絶対位置を指定するときに原点としてどこを使用するかを知っています。それ以外の場合は、ブラウザ ペインの左上が使用されます。

コンテンツの背後に表示する場合は、z-index値が必要になる場合もあります。nav

于 2013-10-08T09:26:14.787 に答える
0

これがあなたが探しているものかどうかはわかりませんが、ナビposition: absolute;とwidth: 100%;. これにより、ナビゲーション要素がドキュメントの流れから外れます。

于 2013-10-08T09:25:09.547 に答える