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