Html CSS3背景色有问题

基本上，整个导航栏在屏幕上应该有一个背景色，但当我运行代码时，它不会显示出来。我希望他们将导航div中的所有内容格式化为该颜色，但事实并非如此。我对HTML5和CSS3相当陌生，所以这可能是一个愚蠢的错误，但我做了一些研究，找不到任何答案

#导航{
宽度：100%；
高度：自动；
背景色：#1d517e；
背景：线性梯度（至底部，#003b6e，#1d517e）；
}
#导航ul{
显示：内联块；
保证金：0；
填充：0；
}
#左导航{
浮动：左；
}
#导航ul.right{
浮动：对；
}
#导航ulli{
显示：内联块；
保证金：0；
填充：6px 10px 5px 10px；
列表样式：无；
背景色：透明；
背景色：rgba（0,0,0,0.12）；
}
#导航左李{
浮动：左；
右边框：1px纯黑；
}
#导航ul右李{
浮动：对；
左边框：1px纯黑；
}

基本上，由于您浮动的是

ul

s，因此必须将

float:left

添加到它们的父项中，

#导航

。否则，它的高度将为零，这就是背景不可见的原因。

我假设背景颜色是指

导航
div中定义的颜色。您的
导航
div上有
高度：auto
。您正在浮动导航链接，但未清除浮动或浮动父项。因为它没有任何可以调整的依据，所以默认情况下它占用0像素的高度

浮动父对象：

#navigation {
  width: 100%;
  float: left; /* or height: 30px; */
  background-color: #1d517e;
  background: linear-gradient(to bottom, #003b6e, #1d517e);
}

#navigation {
  width: 100%;
  height: 30px;
  background-color: #1d517e;
  background: linear-gradient(to bottom, #003b6e, #1d517e);
}

在父对象上设置固定高度：

#navigation {
  width: 100%;
  float: left; /* or height: 30px; */
  background-color: #1d517e;
  background: linear-gradient(to bottom, #003b6e, #1d517e);
}

#navigation {
  width: 100%;
  height: 30px;
  background-color: #1d517e;
  background: linear-gradient(to bottom, #003b6e, #1d517e);
}

或清除浮动（首选使用
溢出：auto
）：

您选择哪种方法取决于您：）

希望这有帮助
 那是因为您正在浮动
ul
。你需要清除它们

尝试添加以下内容：

#navigation:after {
  clear: both;
  content: " ";
  display: block;
}

另外，
ul.right
首先需要有
li
和
a
内部
li
导航
div上的背景没有显示在导航栏上的原因是因为两个子
ul
都是浮动的。这使得父div没有高度。您可以通过向
#导航添加高度来解决此问题，如下所示：

#navigation {
    height: 29px;
}

或者您可以使用下面的css将
.clearfix
类添加到
#navigation
div中：

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

并将该类添加到您的div中，如下所示：

<div class="clearfix" id="navigation"></div>



创建一个
clearfix
类很好，因为您可以在项目中的任何其他地方使用它。这也将允许您摆脱底部的
clear
div。如果您想了解有关clearfix的更多信息，这里也是我经常参考的文章。关于它的工作原理有很多文章要读。
替换
高度：自动带
高度：29px
对于
#导航
应该将
清除器
div放置在导航栏中浮动div和
清除器的后面：这两个
css都应该应用于它，目前它没有添加

#navigation {
    overflow: hidden;
}

希望这能有所帮助
我很确定，在导航时，你正在用background属性覆盖background color属性。在我看来，浮动parent div是一种懒惰的处理方法。这也可能会导致其他内容出现不必要的重叠。同意@Matthew的说法，这不是一个好的解决方案，这样做会导致更多问题。对于OP：浮动父项可能会导致其他内容出现不必要的重叠。您应该清除父项，而不是其中一个子项。