Question

我觉得有点愚蠢问这个，但不知何故我的导航栏（ul）的背景颜色是不可见的（我知道它在那里，因为当我的JQuery脚本给它一个固定的位置时它是可见的。

感谢任何帮助。

body{
	width: 100%;
	margin: 0 auto;
    background-color: #000000;

}
#HeaderImage{
	width: 100%;
	height: auto;
	display: block;
}
#Nav{
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 100%;
    background-color: #4f4f4f;
    display: block;
}
.Nav{
    display: block;
    color: #c5c5c5;
    text-align: center;
    display: inline;
    width: 10%;
    float: left;
    padding: 1%;
}
.NavEx{
    display: block;
    color: #c5c5c5;
    text-align: center;
    display: inline;
    width: 10%;
    float: right;
    padding: 1%;
}
.Nav:hover,.NavEx:hover{
    background-color: #006500;
    color: #00ff00;
}
.FixedNav {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}
#Content{
    background-color: #2d5c1e;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 2%;
    height: 100vh;
}
.HomeContent{
    text-align: center;
}
#HH{
    text-align: center;
    font-size: 24pt;
    margin-top: 10%;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GIP</title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        //Some JQuery here to make the navigation bar stay on top when scrolled beneath it.
        $(document).ready(function () {
            $(window).scroll(function () {
                console.log($(window).scrollTop())
                if ($(window).scrollTop() > $('#HeaderImage').height()) {
                    $('#Nav').addClass('FixedNav');
                }
                if ($(window).scrollTop() < $('#HeaderImage').height()) {
                    $('#Nav').removeClass('FixedNav');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <img ID="HeaderImage" src="images\WebsiteHeader.jpg" alt="headerimage" />
            <ul ID="Nav">
                <a href="Default.aspx"><li class="Nav">Home</li></a>
                <a href="About.aspx"><li class="Nav">About</li></a>
                <a href="Gastenboek.aspx"><li class="Nav">Forum</li></a>
                <a href="Contact.aspx"><li class="Nav">Contact</li></a>
                <a href="Login.aspx"><li class="NavEx">Login</li></a>
                <a href="Default.aspx"><li class="NavEx">Logout</li></a>
		    </ul>
        <div id="Content">
            <h2 id="HH">Hiya.</h2>
            <p class="HomeContent">Nothing interesting here yet.</p>
        </div>
    </form>
</body>
</html>

Answer 1

那是因为你已经在#Nav内部浮动了内容。浮动元素不会占用任何空间，因此#Nav的高度为0，因此您无法看到背景颜色。

使用某种形式的clearfix来纠正这个问题。

穷人的clearfix：overflow: hidden;，添加带有浮动内容的元素（例如#Nav）。
Micro Clearfix。

＆＃13;

//Some JQuery here to make the navigation bar stay on top when scrolled beneath it.
$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > $('#HeaderImage').height()) {
      $('#Nav').addClass('FixedNav');
    }
    if ($(window).scrollTop() < $('#HeaderImage').height()) {
      $('#Nav').removeClass('FixedNav');
    }
  });
});

＆＃13;

body {
  width: 100%;
  margin: 0 auto;
  background-color: #000000;
}
#HeaderImage {
  width: 100%;
  height: auto;
  display: block;
}
#Nav {
  list-style-type: none;
  margin: 0%;
  padding: 0%;
  width: 100%;
  background-color: #4f4f4f;
  display: block;
  overflow: hidden;
}
.Nav {
  display: block;
  color: #c5c5c5;
  text-align: center;
  display: inline;
  width: 10%;
  float: left;
  padding: 1%;
}
.NavEx {
  display: block;
  color: #c5c5c5;
  text-align: center;
  display: inline;
  width: 10%;
  float: right;
  padding: 1%;
}
.Nav:hover,
.NavEx:hover {
  background-color: #006500;
  color: #00ff00;
}
.FixedNav {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
#Content {
  background-color: #2d5c1e;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 2%;
  height: 100vh;
}
.HomeContent {
  text-align: center;
}
#HH {
  text-align: center;
  font-size: 24pt;
  margin-top: 10%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <img ID="HeaderImage" src="images\WebsiteHeader.jpg" alt="headerimage" />
  <ul ID="Nav">
    <li class="Nav"><a href="Default.aspx">Home</a></li>
    <li class="Nav"><a href="About.aspx">About</a></li>
    <li class="Nav"><a href="Gastenboek.aspx">Forum</a></li>
    <li class="Nav"><a href="Contact.aspx">Contact</a></li>
    <li class="NavEx"><a href="Login.aspx">Login</a></li>
    <li class="NavEx"><a href="Default.aspx">Logout</a></li> 
  </ul>
  <div id="Content">
    <h2 id="HH">Hiya.</h2>
    <p class="HomeContent">Nothing interesting here yet.</p>
  </div>
</form>

＆＃13;

注意：您的<li>和<a>标记无效，所以我在我的示例中修复了它。 <a>应位于<li>内。

Answer 2

虽然我建议您查看一下您的classname / id命名，但在应用以下CSS规则时，您会看到背景颜色变为可见：

#Nav a {
    display: inline-block;
}

原因是默认情况下，锚标记是默认设置的，与anchor标记内的list元素冲突，该标记也以内联方式显示（另请注意，HTML标记不正确。<ul>只能包含<li>元素。

因此，总结一下您的HTML应该更像：

<ul id="Nav">
    <li class="Nav">
        <a href="#">etc.</a>
    </li>
</ul>

Answer 3

为#Nav。

添加高度

另外这是ul。

的正确语法

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

css背景颜色在元素上不可见

3 个答案: