html - How can I move my navigation bar to a different place? -
i'm trying make nav bar horizontal , centered. right now, it's smushed right of website. how control bar located?
also, why can't have css under #nav (why need #nav ul li, etc?)
#nav{ width: 90%; text-align: center; font-size: 35px; text-align: center; } #nav ul li{ display: inline; height: 60px; text-align: center; } #nav ul li a{ padding: 40px; background: #25ccc7; color: white; text-align: center; }
<div id="nav"> <ul> <li><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/contact">contact</a></li> </ul> </div>
you need different css selectors because not styles meant applied surrounding container #nav
, elements inside it. pure css, not possible nest rules. if nesting asking for, take @ less or sass (duckduckgo friend).
your list items pushed little right because natural behaviour of list items unless overwrite responsible css attributes margin
, / or padding
(depending on browser). reset both 0
in css list items.
#nav { background-color: #e8e8e8; width: 90%; font-size: 35px; text-align: center; margin: 0 auto; } #nav ul { display: inline-block; white-space: nowrap; margin: 0; padding: 0; } #nav ul li { display: inline; text-align: center; margin: 0; padding: 0; } #nav ul li { padding: 40px; background: #25ccc7; color: white; text-align: center; }
<div id="nav"> <ul> <li><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/contact">contact</a></li> </ul> </div>
Comments
Post a Comment