CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25062

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

I am creating a horizontal list. Here is my html:

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

And here is the css:

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

If I add a div inside of the list, then it does not show horizontally anymore. Here is the new html:

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

What about the div changes the output? Also, how would I fix this?

Upvotes: 0

Views: 63

Answers (2)

haltersweb
haltersweb

Reputation: 3149

As already mentioned, divs are block level elements.

What are you trying to achieve by nesting a div? If you don't need a dimensional container just use a <span> rather than using a <div> styled with display: inline. Reason: spans are inline by nature and won't need additional css to make them so.

If you want a dimensional container while still retaining your horizontal structure you can use either a <span> or <div> as long as you assign display: inline-block

Even better, style the list item itself with display: inline-block. That way you don't need the nested DOM element.

Upvotes: 3

Ruskin
Ruskin

Reputation: 6171

As gillesc said, DIV tags are block level. Try the following dubious code in your css

ul.deals div {display: inline}

You could possibly use inline-block instead

Upvotes: 2

Related Questions