html - CSS Inheritance and float:left issues -
i new css , have few questions based on code below:
1) why bottom-border , background color cut off when said width= 100%?
2) why second unordered list (with class "dropdown") within first not inherit elements declared parent unordered list (with class "tabs")?
3) why first unordered list (with class "tabs") not appear horizontally when run in browser? i've tried using 'float: left' , 'display: inline' lines neither work, or separately
html:
<!doctype html> <html> <head> <title> random web page </title> <link rel="stylesheet" type="text/css" href="basic styles test.cpp"> </head> <body> <div class="navbar"> <ul class="tabs"> <li>pancakes</li> <li>waffles</li> <li>bacon</li> <li>drinks <ul class="dropdown"> <li>orange juice</li> <li>milk</li> <li>water</li> </ul> </li> </ul> </div> </body> </html>
css:
.navbar { position: absolute; top: 0; left = 0; width = 100%; background: red; border-bottom: 5px solid #ccc; overflow: hidden; } .tabs { list-style: none; float: left; } .dropdown { }
your syntax wrong,
width:100%
, not width = 100% :) same thing left = 0 it's attr:value in css.the second
ul
not styled because u usedlist-style:none
on class.tabs
if u want styleul
's way u should useul {list-style:none}
or
.tabs, .dropdown {list-style:none}
if u want first
ul
horizontally u should usefloat:left
on child-elements.tabs>li {float:left}
.tabs>li
means u select directli
-elements.tabs
-class element
Comments
Post a Comment