Can I use a div inside a list item?

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>

76074 次浏览

小开

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

小开

Yes, you can. As much as you want.

小开

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.

小开

最佳答案

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">

小开

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

小开

if you take a look with your developer tools and inspect katespade website's code you will find that you can add as many div inside a Li tag but you cannot add the tag as a child in <ul> or <ol>.

        <ul>


<li> <div class="example1>


<span>lorem ipsum </span>
</div> </li>
<li> </li>


</ul>

here is an example on this katespade's web app

Katespade