Question

我的导航栏有问题。我的导航栏不在我块的背景颜色中。我可以尝试position:absolute，但不建议这样做。

.transparent{
  width: 100%;
  height: 100px;
  margin-top: 10px;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
}

我被困住了。任何人都可以帮忙或者知道为什么代码不起作用吗？请帮忙。

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');

body{
  padding: 0px;
  margin: 0px;
}

header{
  width: 100%;
  height: 38px;
}

.subtitles{
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  padding-top: 8px;
  padding-left: 80px;
  padding-right: 80px;
  text-transform: uppercase;
  text-align:right;
}

.subtitle-left{
  display: inline-block;
  padding-left: 18px;
  float: left;
}

.subtitle-right{
  display: inline-block;
  padding-left: 18px;
}

.far{
  color: #C22312;
  font-size: 16px;
}


.transparent{
  width: 100%;
  height: 100px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
}

.mylogo{
  padding-top: 22px;
  padding-left: 80px;
  padding-bottom: 16px;
  position: absolute;
}

nav{
  padding-top: 10px;
  padding-right: 120px;
  width: auto;
}
nav ul{
  width: auto;
  padding: 0px;
  margin: 0px;
  list-style: none;
  float: right;
}
nav ul li{
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
nav ul li a{
  padding: 10px 14px 10px 14px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
}
nav ul li a:hover{
  background-color: white;
  color: black;
}

.active{
  background-color: #C52E1E;
  color: #f2f2f2;
}

  <header>
<div class="subtitles">
  <div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
  <div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
  <div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
  <div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
  <ul>
    <li><a class="active"><href="index.php">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Investement plan</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Faqs</a></li>
    <li><a href="#">Rules</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
  </header>

Answer 1

也将class="transparent"添加到导航HTML元素中。或者，您可以像其他人一样直接在CSS中设置nav元素的样式。

所以：

<nav class="transparent">
  <ul>
    <li><a class="active" href="index.php">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Investement plan</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Faqs</a></li>
    <li><a href="#">Rules</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>

或者：

nav {
  padding-top: 10px;
  padding-right: 120px;
  width: auto;
  background-color: rgba(0,0,0,0.5);
}

Answer 2

您没有对导航栏应用任何背景色：

只需这样做：

nav ul li a{
  padding: 10px 14px 10px 14px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  background-color: gray;
}

顺便说一句：您的链接中也有一个错误：应该是：<li><a class="active" href="index.php">Home</a></li>

检查以下代码段

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');

body{
  padding: 0px;
  margin: 0px;
}

header{
  width: 100%;
  height: 38px;
}

.subtitles{
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  padding-top: 8px;
  padding-left: 80px;
  padding-right: 80px;
  text-transform: uppercase;
  text-align:right;
}

.subtitle-left{
  display: inline-block;
  padding-left: 18px;
  float: left;
}

.subtitle-right{
  display: inline-block;
  padding-left: 18px;
}

.far{
  color: #C22312;
  font-size: 16px;
}


.transparent{
  width: 100%;
  height: 100px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
}

.mylogo{
  padding-top: 22px;
  padding-left: 80px;
  padding-bottom: 16px;
  position: absolute;
}

nav{
  padding-top: 10px;
  padding-right: 120px;
  width: auto;
}
nav ul{
  width: auto;
  padding: 0px;
  margin: 0px;
  list-style: none;
  float: right;
}
nav ul li{
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
nav ul li a{
  padding: 10px 14px 10px 14px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  background-color: gray;
}
nav ul li a:hover{
  background-color: white;
  color: black;
}

.active{
  background-color: #C52E1E;
  color: #f2f2f2;
}

 <header>
<div class="subtitles">
  <div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
  <div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
  <div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
  <div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
  <ul>
    <li><a class="active" href="index.php">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Investement plan</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Faqs</a></li>
    <li><a href="#">Rules</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
  </header>

Answer 3

只需将class="active"添加到每个导航链接中，就像在主页链接（如下）中一样：

<li><a class="active"><href="index.php">Home</a></li>

导航为背景色

3 个答案: