无序列表项彼此不对齐[重复]答案

【问题标题】：unordered list items not aligning to each other [duplicate]无序列表项彼此不对齐[重复]
【发布时间】：2021-05-21 05:30:28
【问题描述】：

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

#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，但它不起作用，我不知道问题出在哪里

【问题讨论】：

标签： html css list navigation header

【解决方案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>

【讨论】：

效果很好！谢谢男人
实际上有一件事，在应用您的更改之前，当我用鼠标越过一个项目时，整个项目会将其属性更改为 a:hover 中的属性，但现在只有文本区域发生变化，外面的橙色部分保持不变
好的，所以，实际上在我改变之前它是一样的，你认为是“整个项目”和“文本区域”，但实际上，它只是 <a> 标签，悬停改变了一个背景，你看到的没有改变的实际上是它的父 <li> 。因此，为此，请在悬停时更改父背景并使用 flex 为其提供所需的高度：#navigation-bar li { float: left; height: 50px; display: flex; align-items:center; } #navigation-bar li:hover { background-color: red; color: rgb(225, 151, 77); } 格式错误，我将编辑答案
是的，我发现它只改变了a标签，谢谢btww的答案

【解决方案2】：

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

nav{
    display: block;
}

【讨论】：