CSS3 背景颜色有问题

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

#navigation {
  width: 100%;
  height: auto;
  background-color: #1d517e;
  background: linear-gradient(to bottom, #003b6e, #1d517e);
}
#navigation ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#navigation ul.left {
  float: left;
}
#navigation ul.right {
  float: right;
}
#navigation ul li {
  display: inline-block;
  margin: 0;
  padding: 6px 10px 5px 10px;
  list-style: none;
  background-color: transparent;
	background-color: rgba(0, 0, 0, 0.12);
}
#navigation ul.left li {
  float: left;
  border-right: 1px solid black;
}
#navigation ul.right li {
  float: right;
  border-left: 1px solid black;
}

<div id="navigation">
		<ul class="left">
			<a href="electronics/electronics.html" class="clicker"><li>Electronics</li></a>
			<a href=""><li>Gardening</li></a>
			<a href=""><li>Cooking</li></a>
			<a href=""><li>Art</li></a>
		</ul>
		<ul class="right">
			<a href="" id="about-us"><li>About Us</li></a>
		</ul>
  </div>
	<div class="clear"></div>

那是因为你在浮动ul.您将需要清除它们。

尝试添加以下内容：

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

此外，ul.right需要先有li，a里面li

基本上，由于您正在浮动ul，因此您必须将float: left添加到它们的父级，#navigation也是如此。否则，它的高度将为零，这就是背景不可见的原因。

将height:auto;替换为height:29px;表示#navigation

#navigationdiv 的背景没有显示在导航栏上的原因是因为两个子ul都是浮动的。这使得父div 没有高度。您可以通过向#navigation添加高度来解决此问题，如下所示：

#navigation {
    height: 29px;
}

或者您可以使用下面的 CSS 将.clearfix类添加到#navigationdiv：

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

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

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

创建一个clearfix类很好，因为您可以在遇到此问题的其他任何地方在项目中使用它。这也将允许您摆脱底部的cleardiv。如果你想了解更多关于clearfix的信息，这里也是我一直参考的文章，CSS Tricks。有很多关于它是如何工作的文章可以阅读的。

我假设背景颜色是指navigationdiv中定义的颜色。您的navigationdiv 已height: 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);
}

或清除浮点数（最好使用overflow: auto）：

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

你

选择哪种方法取决于你:)

希望这有帮助！

clearerdiv 应该放在导航栏中，紧跟在浮动div 之后，clear:both css 应该应用于它，目前它没有

add

#navigation {
    overflow: hidden;
}

希望这有帮助

相关内容

最新更新

热门标签：