html - CSS floating elements causes other element background colors to disappear -
i testing out css , seeing how works floating elements in horizontal menue:
<ul id="navlist"> <li><a href="#">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> </ul> ul#navlist { list-style-type: none; margin: 0; padding: 0; background-color: cyan; } ul#navlist li { display: inline; background-color: pink; } /*ul#navlist li { float:left; }*/ i use background colors visually see affected. here output:
notice left gap between list items. when un-comment/insert the following line:
ul#navlist li { float:left; } the gap disappears (what intended) background colors both ul , li disappear. output why this?
the background despairing because content floating, parent's height gets zero. in practical terms, link it's anchored on <li> , not inside it, got it?!
change <li> display type inline-block and, optionally, set height <li> elements.
Comments
Post a Comment