Javascript 元素上不可见的css背景色

问这个问题我觉得有点愚蠢，但不知怎么的，我的导航栏（ul）的背景色是不可见的（我知道它在那里，因为当我的JQuery脚本给它一个固定的位置时，它是可见的）

感谢您的帮助

正文{
宽度：100%；
保证金：0自动；
背景色：#000000；
}
#头像{
宽度：100%；
高度：自动；
显示：块；
}
#导航{
列表样式类型：无；
利润率：0%；
填充：0%；
宽度：100%；
背景色：#4F4F；
显示：块；
}
.导航{
显示：块；
颜色：#C5；
文本对齐：居中；
显示：内联；
宽度：10%；
浮动：左；
填充：1%；
}
NavEx先生{
显示：块；
颜色：#C5；
文本对齐：居中；
显示：内联；
宽度：10%；
浮动：对；
填充：1%；
}
.Nav:hover、.NavEx:hover{
背景色：#006500；
颜色：#00ff00；
}
.固定导航{
排名：0；
z指数：100；
位置：固定；
宽度：100%；
}
#内容{
背景色：#2d5c1e；
左边距：10%；
保证金权利：10%；
垫面：2%；
高度：100vh；
}
.家庭内容{
文本对齐：居中；
}
#嗯{
文本对齐：居中；
字号：24pt；
利润率最高：10%；
}

GIP
//这里有一些JQuery，当在导航栏下方滚动时，它会使导航栏保持在顶部。
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>$（'#HeaderImage'）.height（））{
$（'#Nav'）.addClass（'FixedNav'）；
}
如果（$（窗口）.scrollTop（）<$（'#HeaderImage'）.height（））{
$（'#Nav'）.removeClass（'FixedNav'）；
}
});
});


你好。
这里还没有什么有趣的东西

这是因为您在

#Nav

中浮动了内容。浮动元素不占用任何空间，因此

#Nav

的高度为

0

，因此您无法看到背景色

使用某种形式的clearfix来纠正这个问题

• 可怜人的clearfix:

  溢出：隐藏；

  ，添加到具有浮动内容的元素（即在您的情况下为

  #Nav

  ）
• 这个

//这里有一些JQuery，当在导航栏下方滚动时，它会使导航栏保持在顶部。
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>$（'#HeaderImage'）.height（））{
$（'#Nav'）.addClass（'FixedNav'）；
}
如果（$（窗口）.scrollTop（）<$（'#HeaderImage'）.height（））{
$（'#Nav'）.removeClass（'FixedNav'）；
}
});
})；

正文{
宽度：100%；
保证金：0自动；
背景色：#000000；
}
#头像{
宽度：100%；
高度：自动；
显示：块；
}
#导航{
列表样式类型：无；
利润率：0%；
填充：0%；
宽度：100%；
背景色：#4F4F；
显示：块；
溢出：隐藏；
}
.导航{
显示：块；
颜色：#C5；
文本对齐：居中；
显示：内联；
宽度：10%；
浮动：左；
填充：1%；
}
NavEx先生{
显示：块；
颜色：#C5；
文本对齐：居中；
显示：内联；
宽度：10%；
浮动：对；
填充：1%；
}
.导航：悬停，
.NavEx:悬停{
背景色：#006500；
颜色：#00ff00；
}
.固定导航{
排名：0；
z指数：100；
位置：固定；
宽度：100%；
}
#内容{
背景色：#2d5c1e；
左边距：10%；
保证金权利：10%；
垫面：2%；
高度：100vh；
}
.家庭内容{
文本对齐：居中；
}
#嗯{
文本对齐：居中；
字号：24pt；
利润率最高：10%；
}

你好。
这里还没有什么有趣的东西

虽然我建议您查看一下您的类名/id命名，但在应用以下CSS规则时，您会看到背景色变得可见：

#Nav a {
    display: inline-block;
}

原因是默认情况下，锚定标记是默认设置的，与锚定标记内的列表元素冲突，锚定标记也是内联显示的（请注意，HTML标记不正确。

只能包含

元素

因此，总结一下，您的HTML应该更像：

<ul id="Nav">
    <li class="Nav">
        <a href="#">etc.</a>
    </li>
</ul>

为导航添加一个高度

另外，这是ul的正确语法

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

非常感谢，这解决了我的问题。你不会相信我花了多少时间试图找出问题所在。我也立即修复了标记，我的错。如果可以，我会对此进行投票。