Aligning logo with navigation bar
Question
I am trying to create a nav bar which contains a logo and some tabs.
I want the logo to appear on the left and the tabs (a tags) to appear evenly spaced on the right of the logo
Here's an example
LOGO | Home | About | Contact Me
This would cover the entire header width
This is what I have for as my html:
.headerContainer { display: flex; justify-content: space-between; align-items: center; border: 1px solid #ccc; } ul { list-style-type: none; display: flex; width: 100%; justify-content: space-evenly; } nav { width: 100%; } img { width: 15%; }
<header> <div class="headerContainer"> <div class="logo"> <img src="https://via.placeholder.com/2667x571"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </div> </header>
3 answers
solution1
1 2022-01-28 15:01:29
This gets you closer. You had interior items set to 100%, so the total was too wide.
You also should remove the default left padding from the list.
.headerContainer { display: flex; justify-content: space-between; align-items: center; border: 1px solid #ccc; } ul { list-style-type: none; display: flex; justify-content: space-evenly; padding-left: 0; } nav { width: 85%; }.logo { width: 15%; display: flex; align-items: center; }.logo img { max-width: 100%; }
<header> <div class="headerContainer"> <div class="logo"> <img src="https://via.placeholder.com/2667x571"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </div> </header>
solution2
1 2022-01-28 15:25:45
I've made few changes in CSS and now IMG tag is taking full height and width.
.headerContainer { display: flex; justify-content: space-between; align-items: stretch; border: 1px solid #ccc; } ul { list-style-type: none; display: flex; width: 100%; justify-content: space-evenly; } nav { width: 100%; } img { width: 100%; height: 100%; }
<header> <div class="headerContainer"> <div class="logo"> <img src="https://via.placeholder.com/50"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </div> </header>
solution3
0 2022-01-28 15:27:43
made changes in CSS now it aligns correctly.
.headerContainer { display: flex; justify-content: space-between; align-items: center; border: 1px solid #ccc; } nav { width: 85%; } ul { display: flex; justify-content: space-evenly; list-style-type: none; padding-left:0; }
<:DOCTYPE html> <html> <head> </head> <body> <header> <div class="headerContainer"> <div class="logo"> <img src="https.//via.placeholder.com/50"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </div> </header> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.