將徽標與導航欄對齊
[英]Aligning logo with navigation bar
問題描述
我正在嘗試創建一個包含徽標和一些選項卡的導航欄。
我希望徽標出現在左側，標簽（標簽）均勻分布在徽標的右側
這是一個例子
LOGO | Home | About | Contact Me
這將覆蓋整個 header 寬度
這就是我的 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 個解決方案
解決方案1
1 2022-01-28 15:01:29
這讓你更接近。 您將內部項目設置為 100%，因此總數太寬。
您還應該從列表中刪除默認的左側填充。
.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>
解決方案2
1 2022-01-28 15:25:45
我在 CSS 中做了一些更改，現在 IMG 標簽正在占用完整的高度和寬度。
.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>
解決方案3
0 2022-01-28 15:27:43
在 CSS 中進行了更改，現在它可以正確對齊。
.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>
將導航欄與徽標對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.