0

This is pretty straightforward.

I have the following HTML structure:

<ul id="myContactList">
    <li>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </li>
    ...
</ul>

and the trouble maker CSS:

ul#myContactList>li>ul>li {
    float:left; /* Trouble maker */
}

Here's the JSFiddle.

Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?

Thanks in advance, cheers! :)

4

1 に答える 1

1

それをターゲットにしていますが、最後のリスト項目でフロートがクリアされないという問題があります。http://jsfiddle.net/ekXjy/4/を参照してください(具体的には、CSS の 20 行目。これにより、リスト項目ごとに新しいフロート コンテキストが生成されます)。

ul#myContactList>li>ul {
    list-style-type:none;
    padding:0;
    overflow: hidden; /* New style, to clear the floats contained within */
}

clear:both for ul#myContactList>li>ul は、最後の項目の前のリスト項目のフロートをクリアしますが、最後の項目のフロートは何もクリアしません。overflow:hidden を使用して、各リスト項目に独自のブロック コンテキストを与えると、これが修正されます。

于 2013-04-08T16:35:30.273 に答える