将徽标与导航栏对齐
[英]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.