Kevin Powell - Community•2mo ago

container smaller than children?!

it's display inline-block why is it behaving like this? is it because of ul or what?

8 Replies

Ahmed/忠誠OP•2mo ago

https://github.com/ahmdmoadi/oudhiba find stuff in /public/main.html and /public/css/main.css

GitHub

GitHub - ahmdmoadi/oudhiba: Oud company. A Tribute to my late littl...

Oud company. A Tribute to my late little sister. may we rejoin her in heaven. - ahmdmoadi/oudhiba

Robo•2mo ago

I’m currently not at a laptop so I can’t see how your code is running, but I’d assume it’s a problem with inline-block. I’ve had lots of problems with that display mode in the past, and most of the time it’s fixed for me by using a display:inline-flex You may need to use flex-direction:row; as well to get your exact styling

Choo♚𝕂𝕚𝕟𝕘•2mo ago

This is weird HTML. The direct parent of the li is a div and not a ul or ol. The ul is the grandparent.

Mannix•2mo ago

I don't have an answer for your question as to why? But you can change it to inline-flex/grid to "fix" it. Also div is not allowed as child of a ul

StefanH•2mo ago

The child is just overflowing. If you put overflow: hidden on the parent you should see it

Ahmed/忠誠OP•2mo ago

is there a better way to wrap the <li> s? how do I wrap the <li> s then? 😅

Chris Bolson•2mo ago

In a nested ul

<ul>
  <li>home</li>
  <li>
    <ul>
      <li>login</li>
      <li>register</li>
    </ul>
  </li>
  <li>user</li>
  <li>cart</li>
</ul>

<ul>
  <li>home</li>
  <li>
    <ul>
      <li>login</li>
      <li>register</li>
    </ul>
  </li>
  <li>user</li>
  <li>cart</li>
</ul>

Ahmed/忠誠OP•2mo ago

just saw this after replacing every single li and ul with a div like a moron I think I'm gonna need to revert

Gaming

Programming

container smaller than children?!

Did you find this page helpful?