1

自分のサイトに順序付けられていない<ul>リストを表示するナビゲーションメニューがあります。いくつかのパラメータを追加しようとしています。これにより、jsを介して出力を制御できるようになります。これは、表示するものと非表示にするものがあるためです。

問題は、<li>タグにid属性を適用しないと、出力が非常にうまく出力されることです。適用するとすぐに、レイアウトが引き伸ばされ、自動的にパディングが追加されるように見えます。

<div id="navigation">
<ul id="jsddm" class="dbtree">
    <li class="is-current" id="SHOP">
        <a href="...">SHOP</a>
        <ul>
            <li id="JEWELLERY">
                <a href="...">JEWELLERY</a>
                <ul>
                    <li id="NECKLACES"><a href="...">NECKLACES</a></li>
                </ul>
                <ul>
                    <li id="RINGS"><a href="...">RINGS</a></li>
                </ul>
                <ul>
                    <li id="EARRINGS"><a href="...">EARRINGS</a></li>
                </ul>
                <ul>
                    <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li>
                </ul>
                <ul>
                    <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li id="BESPOKE"><a href="...">BESPOKE</a>
                <ul>
                    <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li>
                </ul>
                <ul>
                    <li id="CHAINS"><a href="...">CHAINS</a></li>
                </ul>
                <ul>
                    <li id="LETTERS"><a href="...">LETTERS</a></li>
                </ul>
                <ul>
                    <li id="CRYSTALS"><a href="...">CRYSTALS</a></li>
                </ul>
                <ul>
                    <li id="GEMSTONES"><a href="...">GEMSTONES</a></li>
                </ul>
                <ul>
                    <li id="CHARMS"><a href="...">CHARMS</a></li>
                </ul>
                <ul>
                    <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li>
        </ul>
        <ul>
            <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li>
        </ul>
        <ul>
            <li id="MY DETAILS"><a href="...">MY DETAILS</a></li>
        </ul>
        <ul>
            <li id="MY HISTORY"><a href="...">MY HISTORY</a></li>
        </ul>
        <ul>
            <li id="LOGOUT"><a href="...">LOGOUT</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="BESPOKE">
        <a href="...">BESPOKE</a>
        <ul>
            <li id="ABOUT"><a href="...">ABOUT</a></li>
        </ul>
        <ul>
            <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
        </ul>
        <ul>
            <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="LOOKBOOK "><a href="...">LOOKBOOK</a>
        <ul>
            <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li>
        </ul>
        <ul>
            <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li id="OUR STORY"><a href="...">OUR STORY</a></li>
</ul>
<ul>
    <li id="PRESS"><a href="...">PRESS</a></li>
</ul>
<ul>
    <li id="BLOG"><a href="...">BLOG</a></li>
</ul>
</div>

id="SHOP"最初の<li>（ ）に追加するとすぐ<div id="navigation"><ul id="jsddm" class="dbtree"><li class="is-current" id="SHOP">に、スタイルシートの元のルールを無視するように、追加のパディングを行うことでそれを壊します。

CSS：-

<style>
   #navigation
   {
    width:160px;
    float:left;
    font-weight:normal;
    font-family:'BulmerMTStd-Regular';
    line-height:18px;
    padding-bottom:10px;
    font-size:12px; 
    }
    #navigation ul{margin-left:0px; padding-left:0px;}
    #navigation li{text-align:left; margin:0px; padding:0px;}
    #navigation ul li{color:#000000; list-style:none; margin-left:0px; padding-left:0px; margin-top:0px;}
    #navigation li ul{margin-left:0px; padding-left:0px; display:none;}
    #navigation li a{color:#000000;font-family:'BulmerMTStd-Regular'; text-decoration:none; line-     height:18px; padding-bottom:10px;}
    #navigation li a:hover{color:#8a8888;}
    #navigation li ul li ul{padding-left:10px; color:#8a8888;}
    #navigation li ul li ul a{color:#8a8888;}
    #navigation li ul li ul a:hover{color:#000000;}
    #navigation{z-index:0}
    </style>

これはおそらく本当に単純な問題だと思います...しかし、私はそれを解決できないようです..どんな助けでも大歓迎です。

4

2 に答える 2

0

@Dchris が言うように、2 つの間の唯一の変更点は の追加ですid="SHOP"。これは、@smclark が言うように、#SHOP のスタイルをどこかに定義した場合にのみ影響します。

私たちがそれに取り組んでいる間、あなたのリストは不必要に深くネストされています. 変更することで、HTML をよりクリーンで読みやすくすることができます (そして、この例でははるかに短くなります)。

<li>
    asfasf
    <ul>
        lkhlkhlkh
    </ul>
</li>

に

<li>asfasf</li>
<ul>
    lkhlkhlkh
</ul>

結果は

    <div id="navigation">   
    <ul id="jsddm" class="dbtree">
        <li class="is-current" id="SHOP"><a href="...">SHOP</a></li>
        <ul>
            <li id="JEWELLERY"><a href="...">JEWELLERY</a></li>
            <ul>
                <li id="NECKLACES"><a href="...">NECKLACES</a></li>
                <li id="RINGS"><a href="...">RINGS</a></li>
                <li id="EARRINGS"><a href="...">EARRINGS</a></li>
                <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li>
                <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li>
            </ul>
            <li id="BESPOKE"><a href="...">BESPOKE</a></li>
            <ul>
                <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li>
                <li id="CHAINS"><a href="...">CHAINS</a></li>
                <li id="LETTERS"><a href="...">LETTERS</a></li>
                <li id="CRYSTALS"><a href="...">CRYSTALS</a></li>
                <li id="GEMSTONES"><a href="...">GEMSTONES</a></li>
                <li id="CHARMS"><a href="...">CHARMS</a></li>
                <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li>
            </ul>
            <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li>
            <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li>
            <li id="MY DETAILS"><a href="...">MY DETAILS</a></li>
            <li id="MY HISTORY"><a href="...">MY HISTORY</a></li>
            <li id="LOGOUT"><a href="...">LOGOUT</a></li>
        </ul>
        <li id="BESPOKE"><a href="...">BESPOKE</a></li>
        <ul>
            <li id="ABOUT"><a href="...">ABOUT</a></li>
            <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
            <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li>
        </ul>
        <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
        <ul>
            <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li>
            <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li>
        </ul>
        <li id="OUR STORY"><a href="...">OUR STORY</a></li>
        <li id="PRESS"><a href="...">PRESS</a></li>
        <li id="BLOG"><a href="...">BLOG</a></li>
    </ul>
</div>

もちろん、CSS を調整する必要がありますが、それもクリーンアップされます -ul li li ul ul型の定義はもう必要ありません。繰り返しになりますが、CSS をクリーンアップしてトリミングすることができます。いくつかのヒント:#navigation liスタイルは#navigation 内のすべての#navigation ul li<li> を対象とするため、たとえば に適用されます。このようなものでも同じ結果が得られるはずです (タイプミスや誤って削除された定義が 1 つまたは 2 つある可能性があります)。インデントは、カスケードを視覚化するのに役立ちます (CSS は通常、このように表示されませんが、違いはありません)。これは、深くネストされた <li> 構造内の <ul> のためのものであることに注意してください。

<style type="text/css">
#navigation {
    width:160px;
    float:left;
    font-weight:normal;
    font-family:'BulmerMTStd-Regular';
    line-height:18px;
    padding-bottom:10px;
    font-size:12px;
    z-index: 0;}

    #navigation ul{margin-left:0px; padding-left:0px;}

        #navigation ul li{color:#000000; list-style:none;}

    #navigation li{text-align:left; margin:0px; padding:0px;}

        #navigation li ul{display:none;}
        #navigation li a{color:#000000; text-decoration:none;}
        #navigation li a:hover{color:#8a8888;}

            #navigation li ul li ul{padding-left:10px; color:#8a8888;}

                #navigation li ul li ul a{color:#8a8888;}
                #navigation li ul li ul a:hover{color:#000000;}
</style>
于 2013-03-22T00:58:14.997 に答える
0

HTML コードの 2 番目の部分で、id="SHOP" を追加しました。次に、li タグは id="SHOP" を最初に選択します。li タグは、id="SHOP" とは異なるプロパティがある場合にのみ、id="jsddm" の任意のプロパティを使用します。これら 2 つに同じプロパティがある場合id="SHOP" の id が適用されます。

一般に、インライン要素で多くのクラスと ID を混同しないようにしてください。

于 2013-03-21T22:42:31.750 に答える