<分区>
<分区>
我正在尝试用图像制作导航栏，但我遇到了图像影响导航栏中其他元素对齐的问题。我无法让链接与页面顶部齐平。如果我删除图像，则没有问题。
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}<div class="navbar-wrapper">
<img class="logo" src="https://image.ibb.co/cVNZww/logo.jpg">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
</div>最佳答案
轻松修复!只需将图像 html 元素放在导航栏之后，并使用 CSS 添加 float 样式 (float: left;)
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}<div class="navbar-wrapper">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
<img class="logo" style="float: left; "src="https://image.ibb.co/cVNZww/logo.jpg">
</div>关于html - 影响导航栏对齐的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48481011/