开发者

How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

开发者 https://www.devze.com 2022-12-19 14:02 出处:网络
I\'m trying to create a list nested within a list using XHTML Strict 1.0. The problem is that with XHTML strict a ul element can not be nested directly within another ul element. Thus, the inner ul el

I'm trying to create a list nested within a list using XHTML Strict 1.0. The problem is that with XHTML strict a ul element can not be nested directly within another ul element. Thus, the inner ul element has to be nested within a li element. However, when doing it this way, the first row of the inner list get a dubble bullet, as shown in the example below. So now B gets a double bullet since the outer and inner li elements both create a bullet. Do anyone know how to fix this in CSS so that B is intended as a nested list, but only gets one bullet? Thanx!

  • A
    • B
    • C
    • D
  • E
    • F
    • L
    • H

XHTML for the above example:

<ul>
    <li>A</li>
    <li>
        开发者_如何学C<ul>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>E</li>
    <li>
        <ul>
            <li>F</li>
            <li>L</li>
            <li>H</li>
        </ul>
    </li>
</ul>


This is valid XHTML strict. The added bonus is that this actually describes the nesting much more semantically than if you put the nested list in a separate list item as the relationship between ("B", "C", "D" to parent "A") is described by this mark-up.

There is a suggestion about using a definition list (dl) instead, but you should only use that as intended (i.e. if you are displaying a list of definitions!)

  • A
    • B
    • C
    • D
  • E
    • F
    • L
    • H
<ul>
    <li>A
        <ul>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>E
        <ul>
            <li>F</li>
            <li>L</li>
            <li>H</li>
        </ul>
    </li>
</ul>


 ul ul > li:first-child { list-style-type: none; }
0

精彩评论

暂无评论...
验证码 换一张
取 消