3

コンテンツのドロップダウンがあります。画面左側の0pxにコンテンツを揃えようとしています。何を試しても、親コンテナ内で整列されたままになります。

ドロップダウンはブラウザの中央に配置されているため、目的の場所にドロップダウンを配置するのに苦労しています。

http://jsfiddle.net/XkuHy/2/

<div id="sticky">
    <div id="nav">
        <div class="logo">logo</div>
        <span class="n list">browse</span>
        <span class="n list">search</span>
        <div class="n drop">
            <span>My Account</span>
            <div>
                hello, world!
            </div>
        </div>
    </div>

注：CSSは私の強みではありません。

注2：StackOverflowは、jsFiddleへのリンクだけでなく、必要なコードについても強打し続けました-なぜそうなのかわからないので、フィドルに表示されているように、ダンプされたコードを無視してください。

ここに画像の説明を入力してください

4

2 に答える 2

2

ボックスは、相対的な位置にあるため.content、親である.n.dropdivに対して相対的な位置に配置されています。要素から相対位置を削除すると、必要な場所にそれ自体を配置.n.dropする要素が見つかります。メニューをクリアするために、要素に.contentaを追加する必要がある場合もあります。margin-top: 16px;.content

更新されたデモはここで見ることができます：http：//jsfiddle.net/XkuHy/14/

于 2012-12-30T02:26:12.913 に答える
2

マージンを0pxにしたとき。0pxになりますが、その親に関してです。したがって、cssに対して負の値のマージンを試すことができます。

margin-left:-205%;

このように：http：//jsfiddle.net/XkuHy/13/ または

left: -345px;

このように：http：//jsfiddle.net/XkuHy/13/

しかし、どちらにもブラウザ間の比較可能性の問題があります。

これをcssに追加することでこの問題を解決しました。ここで、「helloworld」のクラス名は「dropmenu」です。

.drop:hover .dropmenu{
    position: fixed;
    top:  100px;
    left: 0;
    width: 100%;
    height:100px;
    padding:0;
    margin:0;
    z-index:998;
    background-color:white; 
}
​

サプライズ！サプライズ！私はそれがうまくいくと思います！チェックアウト： http： //jsfiddle.net/XkuHy/10/

于 2012-12-30T02:53:23.443 に答える