Can I use a div inside a list item?

2019-01-25 01:23发布

Why is the following code valid when I am using a <div> inside a <li>?

<ul>
    <li class="aschild">
        <div class="nav">Test</div>
    </li>
</ul>

5条回答
聊天终结者
2楼-- · 2019-01-25 01:46

An <li> is a block element, and will work perfectly fine with other block elements inside.

查看更多
forever°为你锁心
3楼-- · 2019-01-25 01:48

Inside a <li> you can have anything you could naturally put inside a <div>. They are no different in this sense.

It should be valid in HTML4, XHTML and HTML5 as well.

This is NOT valid though (so the sources you found about "no divs in lists" could refer to this situation):

<ul>
    <li></li>
    <div></div>
    <li></li>
</ul>

So: Lists (ul, ol) can only have lis as their children. But lis can have anything as their children.

查看更多
该账号已被封号
4楼-- · 2019-01-25 01:53

Because <li> is a block element, not an inline element like <span> or <a>.

查看更多
孤傲高冷的网名
5楼-- · 2019-01-25 01:56

Yes, you can. As much as you want.

查看更多
萌系小妹纸
6楼-- · 2019-01-25 02:07

Yes you can use a div inside a li and it will validate.

<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
查看更多
登录 后发表回答