6

これはここでの私の最初の質問ですが、他にもたくさんあると確信しています。達成できるかどうか知りたい小さな位置の問題があります。

フロートされた sを含む順序付けられていないリスト ( <ul>) が<li>あります。メインのオプションについてはこれらを左にフロートし、連絡先とサポートのオプションについては右にフロートします。これで、水平リストの下に表示される<span>それぞれの内部ができました。リストはメニュー用です。<li>これら<span>はメニュー選択の説明として機能し、通常のオプションについては、position:absolute; top:30px; left:0;これを疑わしいように使用します。ここで、右にフロートするメニュー項目の位置属性を変更して、スパンが取得position:absolute; top:30px; right:0;され、これがまったく機能しないようにしたいと考えています。これをより具体的なCSSルールで変更することは不可能のようですが、フロートはうまく機能します。

html:

<div id="menu">
<ul>
    <li>Menu1<span>Info1</span></li>
    <li>Menu2<span>Info2</span></li>
    <li class="support">Support1<span>Info3</span></li>
</ul>

CSS:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

css の最後の行に違いはありません。誰かが答えや回避策を持っているなら、私は助けに大いに感謝します.

質問に回答し、問題を解決しました。James Arons または mercator の投稿を確認してください。

4

3 に答える 3

6

そのCSSから判断すると、CSSを正しく理解していないか、少なくとも正しく使用していないようです。良い紹介のために、カスケード、特異性、継承に関するSitePointの記事を読むことをお勧めします。

動作しない理由は、そのCSSの最後の2support行がクラスのリストアイテムに適用されるためです。最後から2番目の行がすべてのリスト項目に適用され、最後の行がリスト項目の行に追加されsupportます。したがって、leftその最後の行にはleftプロパティがないため、プロパティは前の行からカスケードされ、それもになりleft: 0 ます。

クラスを使用して特殊なケースをマークする場合、一般的なケースのすべてのCSSを繰り返すのではなく、変更に必要なCSSのみを提供する必要があります。

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span {left:auto; right:0;}

そのCSSは、support-classリストアイテムが他のリストアイテムが取得するすべてのCSSを取得することを意味しますが、leftプロパティはデフォルトにリセットされ、right代わりにプロパティが設定されます。

于 2009-11-08T22:27:28.733 に答える
6

あなたが設定したとしてもright:0、あなたleft:0はまだ継承されています。クラスleft:autoのそのスタイルをオーバーライドするように設定する必要があります。support

于 2009-11-08T22:54:23.877 に答える
0

うーん変。support:hover スパンはより具体的なセレクターであるため、コードが機能しない理由はわかりません。

ただし、修正が見つかりました:位置の絶対要素が左にありました: 0; デフォルトで。左を削除した場合: 0; スパンセレクタからは機能します。

コードは次のようになります。

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}
于 2009-11-08T21:55:29.693 に答える