导航栏列表项被图像打乱

Question

需要一些帮助来了解为什么我的链接没有位于应有的位置。 只有第一个孩子似乎在它应该对齐的地方。

问题图片
如图所示的导航栏问题

HTML

    <nav>
        <ul>
            <li><a href="#"><img src="images/oms.png" style="height: 45px;"></li>
            <li><a href="#">Services</li>
            <li><a href="#">About</li>
            <li><a href="#">Contact</li>
        </ul>
    </nav>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    background-image: url(images/bgimage.avif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav{
    background-color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}
nav ul{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}
nav li{
    height: 50px;
}
nav a{
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
    color: black;
    text-decoration: none;
}
nav a:hover{
    background-color: #f0f0f0;
}
nav li:first-child{
    margin-right: auto;
}

只有第一个子项位于导航栏中，而所有其他列表项都位于下方。

任何帮助都会很棒。非常感谢！

起初我以为这可能是因为我为图像设置了尺寸。 我从问题中删除了图像，然后下一个列表项成为第一个子项，但其余元素的问题仍然存在。

我尝试将 nav a 元素的边距设置为 0，但仍然没有成功。

Answer 1

你的问题可能是使用导航来证明结束