html - Horizontal nav bar centers, but links are vertical? -
so issue css centers nav bar fine, links listed vertically in horizontally centered bar.
it ends looking
http://i.imgur.com/rqcxwk4.png
need links horizontal.
<nav id="nav"> <ul> <li><a href="#about">about</a></li> <li><a href="#baa">description</a></li> </ul> </nav>
and css
} nav ul { display:inline; } .nav li{ display:inline; } .nav a{ float:left; display:inline-block; padding:10px; } nav a:link, a:visited { display: block; width: 100%; font-family: refrigerator; font-weight: bold; font-size: 1.5em; color: #ffffff; background-color: #778899; text-align: center; padding: 4px; } nav a:hover, a:active { background-color: #ff3333; color: black; }
#nav ul { display:inline; } #nav li{ display:inline-block; } #nav a{ float:left; display:inline-block; padding:10px; } nav a:link, a:visited { display: block; width: 100%; font-family: refrigerator; font-weight: bold; font-size: 1.5em; color: #ffffff; background-color: #778899; text-align: center; padding: 4px; } nav a:hover, a:active { background-color: #ff3333; color: black; }
<nav id="nav"> <ul> <li><a href="#about">about</a></li> <li><a href="#baa">description</a></li> </ul> </nav>
hope, help.
Comments
Post a Comment