0

現在、ナビゲーションバーを作成しています。ナビゲーションのメイン要素の幅を自動にしたいのですが、サブ要素はすべて固定幅にします。リストの作成方法は次のとおりです。

    <li>Main Element
        <ul>
        <li> Sub Element </li>
        <li> Sub Element </li>
        <li> Sub Element </li>
        </ul>
    </li>

これは、メインメニュー項目とそのサブメニュー項目ごとに繰り返されます。

私が抱えている問題は、サブ要素の幅を100ピクセルにしたいのですが、メイン要素はテキストサイズに左右両方の10ピクセルのパディングを加えたものに等しくすることです。クラスを作って分けても、両方を変えないと変えられないようです。また、外部スタイルシートで編集ul liとスタイルを試しました。li ulよろしくお願いします。

4

1 に答える 1

1

ul liliの下の任意のレベルのすべてのに影響しulます。の直接の子である'ul > liにのみ影響します。これは子コンビネータと呼ばれます：http ：//www.w3.org/TR/css3-selectors/#child-combinatorsliul

クラスを使用せずにそれを実現する場合は、これを使用する必要があります（実際には、クラスを使用する方が良い方法ですimo- http: //www.jsfiddle.net/joplomacedo/xeWA4 ）

秘訣は、下のメインメニュー項目に適用したいスタイルを適用してから、ul > liでそれらをオーバーライドすることul ul > liです。これがフィドルです-http://jsfiddle.net/joplomacedo/xeWA4/3/

編集：
実際には、子コンビネータを使用する必要はまったくありません。私が最初にあなたの質問を読んだとき、子供のコンビネータが頭に浮かびました。したがって、ul liオーバーライドによってul ul liも完全に機能し、シンプルになります。

于 2012-07-08T03:07:56.177 に答える