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