4

css を使用して、すべてのリスト項目に下の境界線を追加したいと考えています。ここに私のCSSコードがあります:

ul,ol{
    li{
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-top: 3px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;

        ul,ol{
            margin-left: 2em;
                li{
                    border-bottom: 1px solid #eeeeee;
                }
        }
    }
}

次のような出力が得られます。

スクリーンショット URL: http://oi34.tinypic.com/ih1eea.jpg

css コードはトップ レベルのアイテムで正常に動作しています。しかし、サブリストにはありません。スクリーンショットを見て、助けてください。よろしくお願いします。

4

3 に答える 3

5

デモ

ulあなたの発言にクラスを与えますdemo

.demo li {
   border-bottom: 1px solid #000;  
}

あなたのウェブサイトのすべてのliが必要border-bottomな場合は、これを使用するよりも優れたアイデアではない取得する必要があります

ul li {
   border-bottom: 1px solid #000;
}

ネストされたものをインデントしたい場合liは、テキストを使用できます

于 2013-04-25T11:11:27.057 に答える
1

質問に投稿した構文が間違っています。( CSS ルールでネストすることはできません)

同等の正しい構文は次のとおりです。

li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

 li ul, 
 li ol{
    margin-left: 2em;
}
于 2013-04-25T11:23:14.917 に答える
-2

私はあなたをよく理解しているかどうかわかりませんが、あなたのための簡単なコードがあります:

HTML

<div>
    <ul class="list-1">
        <li class="item-1">Item 1
            <ul class="list-1-1">
                <li>Item 1-1</li>
            </ul>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

ul.list-1 li.item-1, ol.list-1 li.item-1 {
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-top: 3px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;   
}
ul.list-1 li.item-1 ul.list-1-1 , ol.list-1 li.item-1 ul.list-1-1 {
    margin-left: 2em;
}
ul.list-1-1 li {
    border-bottom: 1px solid #eeeeee;
}

デモ

http://jsfiddle.net/jVcFb/1/

于 2013-04-25T11:24:44.823 に答える