html - 以背景颜色导航

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> [e-mail] </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>

标签： htmlcss

Answer 1

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

所以要么：

<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);
}