Question

所以，我有一个有序列表，里面有一个无序列表，如下所示：

    <ol>
        <li>Choose which type of game you want to play</li>
        <li>Press the spacebar to start the game</li>
        <li>
            <ul>
                <li>Controls for single player mode:</li>
                <li>
                    <ul>
                        <li>W and S</li>
                        <li>&uarr; and &darr;</li>
                        <li>A and Z</li>
                        <li>' (apostrophe) and / (forward slash)</li>
                    </ul>
                </li>
                <li>Controls for double player mode:</li>
                <li>
                    <ul>
                        <li>The right player uses A and Z</li>
                        <li>The left player uses ' and /</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ol>

不幸的是，它输出了这个：

http://f.cl.ly/items/16341E0i3M0e203W3C39/skitched-20140807-200731.png

我嵌入了额外的li，否则W3C验证失败。 Validator抱怨<ul>元素在<ol>元素内部粘贴。

如何解决此问题，以便项目前面的列表符号消失？

Answer 1

只是不要创建新的li来嵌入嵌套的ul，而是将它们添加到现有的li。像这样：

<ol>
    <li>Choose which type of game you want to play</li>
    <li>Press the spacebar to start the game
        <ul>
            <li>Controls for single player mode:
                <ul>
                    <li>W and S</li>
                    <li>&uarr; and &darr;</li>
                    <li>A and Z</li>
                    <li>' (apostrophe) and / (forward slash)</li>
                </ul>
            </li>
            <li>Controls for double player mode:
                <ul>
                    <li>The right player uses A and Z</li>
                    <li>The left player uses ' and /</li>
                </ul>
            </li>
        </ul>
    </li>
</ol>

由于HTML中的有序和无序列表为block-level elements，因此默认情况下它们将换行到下一行，因此甚至无需创建其他div或插入换行符。

Answer 2

这是你想要的吗？您将嵌套列表放在li：

中

<ol>
    <li>Choose which type of game you want to play</li>
    <li>Press the spacebar to start the game</li>
    <li>Controls for single player mode:
        <ul>
            <li>W and S</li>
            <li>&uarr; and &darr;</li>
            <li>A and Z</li>
            <li>' (apostrophe) and / (forward slash)</li>
        </ul>
    </li>
    <li>Controls for double player mode:
        <ul>
            <li>The right player uses A and Z</li>
            <li>The left player uses ' and /</li>
        </ul>
    </li>
</ol>

如何在有序列表中正确嵌入无序列表（HTML）

2 个答案: