0

In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.

What's the logic behind this behaviour?

P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?

.li {
  background-color:red;
}
.inline-ul {
  display:inline;
  background-color:yellow;
}
.inline-li {
  /*display:inline;
  background-color:green;*/
}
<html>
    <head>
    </head>
    <body>
      <nav>
          <ul class="mainMenu">
             <li>Item1</li>
             <li class="li">
                 <span>Item2</span>
                 <span>Item3</span>
                 <ul class="inline-ul">
                     <li class="inline-li">Item11</li>
                     <li>Item12</li>
                     <li>Item13</li>
                 </ul>
             </li>
             <li>Item3</li>
             <li>Item4</li>
          </ul>
      </nav>
    </body>
</html>
Notbad
  • 5,936
  • 12
  • 54
  • 100
  • 2
    maybe inline-block instead of inline – Temani Afif Jul 02 '21 at 09:46
  • The children of your inline tag are not inside your li tag. Making it inline only keeps it on the next line to its previous item. But the children are still in separate lines. – Tushar Shahi Jul 02 '21 at 09:48
  • Do you want to use display block? It will atleast solve the color with background yellow. – Tushar Shahi Jul 02 '21 at 09:50
  • `.inline-ul > li {background-color:yellow;}` will not be sufficient? – ciekals11 Jul 02 '21 at 09:50
  • Well guys, I know how to solve this issue. But I want to know why this is behaving the way it is doing. I don't need the fixes just an explanation of the behaviour shown. In my case I was expecting all the
      block to show a yellow background, not just the ul tag itself.
     – Notbad Jul 02 '21 at 09:53

0 Answers0