Question

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

import matplotlib.pyplot as plt
import numpy as np
import pandas as pd

dftail = pd.DataFrame(
        {"Name": ["manhit", "movers", "mayer", "fabcom", "freshimp"], 
        "Utilisation": [10,9,9,8,7]})

x_data = np.arange(len(dftail))
y_data = np.array(dftail.Utilisation)


fig, ax = plt.subplots()
ax.plot(x_data, y_data, 'bo')
ax.set_xticks(x_data)
ax.set_xticklabels(dftail.Name)
plt.show()

#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;
}

Answer 1

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

尝试添加此内容：

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

此外，ul.right需要li首先a li

Answer 2

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

Answer 3

我假设是背景颜色，你的意思是navigation div中定义的颜色。您的navigation div上有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;
}

您采用哪种方法取决于您：）

希望这有帮助！

Answer 4

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

#navigation {
    height: 29px;
}

或者您可以使用以下css向.clearfix div添加#navigation课程：

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

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

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

很高兴创建一个clearfix类，因为您可以在项目中的任何其他地方使用此类。这也可以让你摆脱底部的clear div。如果您想了解更多关于clearfix的信息，请参阅CSS Tricks。有很多文章可以阅读它的工作原理。

Answer 5

将height:auto;替换为height:29px;

的#navigation

Answer 6

clearer div应该放在导航栏内，就在浮动的div之后，clear:both css应该适用于它，目前它不会

Answer 7

添加

#navigation {
    overflow: hidden;
}

希望这会有所帮助

有CSS3背景颜色的问题

7 个答案: