无序列表项目彼此不对齐

Question

我有这段代码可以在网站顶部创建一个粘性导航栏：

#navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(225, 151, 77, 0.95);
    overflow: hidden;
    position: sticky;
    top: 0;
}

#navigation-bar li {
    float: left;
}

#navigation-bar li a {
    color: white;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: sans-serif;
}

#navigation-bar li a:hover {
    background-color: red;
    color: rgb(225, 151, 77);
}

header {
    position: sticky;
    top: 0;
}

#navigation-home-logo {
    height: 50px;
    padding: 0;
    margin: 0;
}


<header>
    <nav>
        <ul id="navigation-bar">
            <li><a href=""><img  id="navigation-home-logo" src=""></a></li>
            <li><a href="">INSTAGRAM</a></li>
            <li><a href="">TIKTOK</a></li>
            <li><a href="">TWITTER</a></li>
            <li><a href="">YOUTUBE</a></li>
        </ul>
    </nav>
</header>

我不明白为什么其他链接没有与图像垂直对齐，我尝试将图像填充和边距设置为 0，但是没有用，我不知道问题出在哪里

Answer 1

发生这种情况是因为 display: block 就是这样工作的，您可以使用 Flex 来做到这一点。喜欢：

#navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(225, 151, 77, 0.95);
    overflow: hidden;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
}

#navigation-bar li {
    float: left;
}

#navigation-bar li a {
    color: white;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: sans-serif;
}

#navigation-bar li a:hover {
    background-color: red;
    color: rgb(225, 151, 77);
}

header {
    position: sticky;
    top: 0;
}

#navigation-home-logo {
    height: 50px;
    padding: 0;
    margin: 0;
}

<header>
    <nav>
        <ul id="navigation-bar">
            <li><a href=""><img  id="navigation-home-logo" src="https://picsum.photos/200"></a></li>
            <li><a href="">INSTAGRAM</a></li>
            <li><a href="">TIKTOK</a></li>
            <li><a href="">TWITTER</a></li>
            <li><a href="">YOUTUBE</a></li>
        </ul>
    </nav>
</header>

Answer 2

您可以尝试在导航元素中使用 display:block 而不是特定的链接，因为显示块会应用到您要应用它的元素内的所有元素：

nav{
    display: block;
}

无序列表项目彼此不对齐

unordered list items not aligning to each other

html

css

navigation

header

list