列表中的一个成员高于另一个成员
列表中的一个成员高于另一个成员
提问于 2022-02-12 06:44:47
我试图在我的网站上创建一个导航栏，但是每次我试图将徽标与左边对齐时，页面选择的位置就会更高，有人有解决方案吗？
截图：
这是html代码：
<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="images/logo1.png" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</li>
</ul>
</div>这是css代码：
.NavBar {
list-style-type: none;
overflow: hidden;
background-color: #333;
padding: 20px;
}
.NavBar .Items {
margin: auto;
width: 60%;
text-align: center;
list-style: none;
}
.NavBar .Logo {
float: left;
}
.NavBar .Links {
display: inline-block;
padding: 0px 16px;
}
.NavBar .Links a {
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}回答 2
Stack Overflow用户
发布于 2022-02-12 07:13:57
向外部导航项的容器中添加flex属性：
.NavBar .Items {
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
/* width: 60%; */
text-align: center;
list-style: none;
}
.NavBar .Links {
border: 2px solid white;
display: flex;
justify-content: space-around;
align-items: center;
}Stack Overflow用户
发布于 2022-02-12 08:12:06
这是你在找的吗？听着，有两个级别的display:flex对齐。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.NavBar {
list-style-type: none;
background-color: #333;
padding: 10px;
}
ul li {
list-style-type: none;
}
.NavBar .Items {
display: flex;
justify-content: space-around;
}
.NavBar .Links {
display: flex;
}
.NavBar .Links a {
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
height: 40px;
align-self: center;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}
img {
height: 60px;
width: 100px;
}<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="https://picsum.photos/200/300" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71089597
复制相关文章
相似问题
腾讯云开发者
