html - Move a nav which is inside a header to the right side -
i have nav
inside header , wanted move nav
right side of page. tried float:right
not lined anymore header. here code:
<header> <nav> <h1>my page</h1> <ul> <a href="#"><li>home</li></a> <a href="#"><li>blog</li></a> <a href="#"><li>about</li></a> <a href="#"><li>contact</li></a> <a href="#"><li>links</li></a> </ul> </nav>
header{ background:#999; color:white; padding:15px 15px 0 15px; } header h1{ margin:0; display:inline; } nav ul{ margin:0; display:inline; padding:0 0 0 15px; } nav ul li{ background:black; color:white; display:inline-block; list-style:none; padding:5px 15px; }
all need add inline-block
properties nav
, header
elements. add width:100%
header full size. of course don't forget float:right
nav
.
also move h1
outside nav
.
there correct code:
header{ background:#999; color:white; padding:15px 15px 0 15px; width:100%; } header h1{ margin:0; display:inline; } header, nav { display:inline-block; } nav { float:right; } nav ul{ margin:0; display:inline; padding:0 0 0 15px; } nav ul li{ background:black; color:white; display:inline-block; list-style:none; padding:5px 15px; }
Comments
Post a Comment