Question

所以我的问题是CSS，而且我觉得我的背景＆＃34;正在被覆盖，它不会产生浅蓝色的背景颜色。有想法该怎么解决这个吗？此外，如果我拥有的是第一部分.nav，那就是颜色显示但是一旦我开始添加其他所有内容就会消失。

.nav{
  height : 40 px;
  background: blue;
}
.nav ul{
  margin: 0;
  padding: 0;
}
.nav ul li{
  list-style: none;
}
.nav ul li a{
  text-decoration: none;
  float: left;
  display: block;
  padding: 10px 20px;
}

Answer 1

对Clearfix这样的nav试试{strong> Demo

HTML：

<div class="nav clearfix">
    <ul>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
    </ul>
</div>

CSS ::

.clearfix { display: block; }

.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}

Answer 2

导航包含浮动元素，因此您可能遇到背景问题。要解决此问题，您可以使用overflow：hidden或clearfix方法：

/**
 * Copyright (c) 2014-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule invariant
 */

"use strict";

/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */

var invariant = function(condition, format, a, b, c, d, e, f) {
  if (__DEV__) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  }

  if (!condition) {
    var error;
    if (format === undefined) {
      error = new Error(
        'Minified exception occurred; use the non-minified dev environment ' +
        'for the full error message and additional helpful warnings.'
      );
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(
        'Invariant Violation: ' +
        format.replace(/%s/g, function() { return args[argIndex++]; })
      );
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }
};

module.exports = invariant;

Answer 3

使用

.nav{
  height : 40 px;
  background: blue;
  overflow:hidden;
}

或

.nav:before, 
.nav:after{
    content:"";
    display:table;
    clear:both;
}

这将解决您的问题

Answer 4

只需将overflow:hidden;添加到您的nav css：

即可

.nav{
   height : 40 px;
   background: blue;
   overflow:hidden;
}

Div导航栏背景颜色不显示

4 个答案: