当背景颜色已经在使用时，如何为 topnav 着色？答案

【问题标题】：How to color topnav when background-color is already in use?当背景颜色已经在使用时，如何为 topnav 着色？
【发布时间】：2021-07-20 17:01:26
【问题描述】：

出于某种原因，.topnav 没有按照它的要求做。 .topnav 应该是彩色的 #A10800，但它是白色的。我已经使用background-color 来指定topnav 应该是哪种颜色。问题的解决方法是什么？

.topnav {
  background: #A10800;
  top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  overflow: hidden;
  font-size: 25px;
  text-align: center;
  color: white;
  padding: 4px;
  text-decoration: none;
  margin-right: 50px;
  margin-left: 50px;
  transition-property: all;
  transition-duration: 0.5s;
  font-weight: bold;
}

.topnav a:hover {
  background: #D1281F;
}

.dropdown {
  float: left;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FF837A;
  top: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="topnav">
  <a href="index.php">NON-HOVER</a>

  <div class="dropdown">
    <a href="index.php">HOVER</a>

    <div class="dropdown-content">
      <a href="index.php">DROPDOWN</a></div>

  </div>
</div>

（悬停查看元素）

【问题讨论】：

标签： html css navbar background-color

【解决方案1】：

.topnav {
    float: left;
    background: #A10800;
    top: 0;
    width: 100%;
}
.topnav a {
    float: left;
    overflow: hidden;
    font-size: 25px;  
    text-align: center;
    color: white;
    padding: 4px;
    text-decoration: none;
    margin-right: 50px;
    margin-left: 50px;
    transition-property: all;
    transition-duration: 0.5s;
    font-weight: bold;
}

您将float:left; 放在.topnav a 和.topnav 上。不错

我不知道为什么，但我会接受它

【讨论】：

【解决方案2】：

每当您使用float 时，组件都会丢失其height:auto 属性。

您要么必须摆脱浮动，要么只需在 .topnav 中添加高度

这样的事情会起作用

.topnav {
    background: #A10800;
    top: 0;
    width: 100%;
    height: 50px
}

【讨论】：

【解决方案3】：

您可以将div 与.topnav 类包装在另一个div 与.color 类中

.color {
    background: #A10800;
}

你的问题就解决了！

【讨论】：

【解决方案4】：

当你浮动一个元素时，它的父元素会忽略它的高度。所以topnav 被折叠，因此background-color 不可见。为了解决这个问题，您可以在浮动元素之后放置一个元素，从而清除浮动。您可以为此在 HTML 中添加一个元素，也可以使用类似 :after:

的伪元素

.topnav:after {
    content: "";
    display: block;
    clear: both;
}

【讨论】：