html - Why does my list stop showing horizontally when I add a div? -

i creating horizontal list. here html:

<ul class="deals">     <li>test</li>     <li>fads</li>     <li>asdf</li> </ul> 

and here css:

ul.deals {   list-style-type: none; } ul.deals li {   display: inline;   padding: 10px 20px; } 

if add div inside of list, not show horizontally anymore. here new html:

<ul class="deals">     <li>         <div>test</div>     </li>     <li>         <div>fads</div>     </li>     <li>         <div>asdf</div>     </li> </ul> 

what div changes output? also, how fix this?

as mentioned, divs block level elements.

what trying achieve nesting div? if don't need dimensional container use <span> rather using <div> styled display: inline. reason: spans inline nature , won't need additional css make them so.

if want dimensional container while still retaining horizontal structure can use either <span> or <div> long assign display: inline-block

even better, style list item display: inline-block. way don't need nested dom element.