Question

这是我尝试创建的导航栏的HTML，标头已设置为具有白色的背景色，但缺少文本色，但是在运行代码时仍然不会起作用。

body {
  margin: 0;
  padding: 0;
  background-color: #999;
}

.head {
  background-color: #fff;
}

.head #logo {
  margin: 0;
  padding: 0;
  float: left;
}

.head .menu {
  clear: none;
  padding: 0;
  float: right;
  margin: 0;
  list-style: none;
}

.head .menu a {
  text-decoration: none;
  color: black;
  padding: 10px 0px 0px 5px;
}

.head .menu li {
  float: left;
}

.head .menu a:hover {
  background-color: #bbb;
}

<head>
  <title>Page Title</title>
</head>

<body>
  <header class="head">
    <h1 id="logo">CORP</h1>
    <ul class="menu">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </header>
</body>

由于某种原因，它不显示标题背景色。我做错了什么？

Answer 1

由于样式设计时使用float属性，因此需要在浮动项目后使用clear。您可以使用通用类（例如.clearfix）来解决此问题：

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

然后将clearfix类放到浮动元素的容器中

body {
  margin: 0;
  padding: 0;
  background-color: #999;
}

.head {
  background-color: #fff;
}

.head #logo {
  margin: 0;
  padding: 0;
  float: left;
}

.head .menu {
  clear: none;
  padding: 0;
  float: right;
  margin: 0;
  list-style: none;
}

.head .menu a {
  text-decoration: none;
  color: black;
  padding: 10px 0px 0px 5px;
}

.head .menu li {
  float: left;
}

.head .menu a:hover {
  background-color: #bbb;
}

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

<head>
  <title>Page Title</title>
</head>

<body>
  <header class="head clearfix">
    <h1 id="logo">CORP</h1>
    <ul class="menu">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </header>
</body>

进一步阅读：https://www.w3schools.com/howto/howto_css_clearfix.asp

标题背景颜色未显示

1 个答案: