如何在此导航栏上提供背景不透明度并水平对齐所有内容？

Question

我已经制作了基本的导航栏，但我在调整所有内容并使背景变得不透明时遇到问题，因此文本和图像会变得更亮，如[图片] [1]所示。附上[小提琴] [2]。

CODE SNIPPET

.topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav ul > li {
      float: left;
      display: block;
      text-align: center;
      padding: 14px 16px;
    }
    
    .topnav a {
      text-decoration: none;
      font-size: 17px;
      color: white;
      display: block;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    /* dropdown menus hidden initially */
    .topnav ul > li > ul {
      display: none;
      width: 200px;
      padding: 0;
      position: absolute;
      background-color: #f76c38;
    }
    .topnav ul > li > ul > li {
      float: left;
      clear: left;
      display: block;
      text-align: left;
    }

Answer 1

您可以尝试一下：

$(document).ready(function() {
  $(".dropdown > a").click(function() {
    $(this).siblings('.dropdown-content').slideToggle(200);
  });
});

@font-face {
  font-family: AvantGarde Demi;
  src: url(AvantGarde Demi.woff);
}

@font-face {
  font-family: AvantGarde;
  src: url(AvantGarde.woff);
}

@font-face {
  font-family: ITC Avant Garde Gothic;
  src: url(ITC Avant Garde Gothic.woff);
}


/******************For Top Nav****************************/

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav ul > li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}

.topnav a {
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: block;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
  display: none;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
}
.topnav ul > li > ul > li {
  float: left;
  clear: left;
  display: block;
  text-align: left;
}

/******************For Top Nav****************************/



li.dropdown{
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <nav>
    <ul>
      <li><img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"></li>
      <li class="dropdown">
        <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>INDIVIDUAL</i></a>
          </li>
          <li><a href="#"><i>CORPORATE</i></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>BE EXTRODINARY</i></a>
          </li>
          <li><a href="#"><i>RISK &amp; REWARD</i></a>
          </li>
          <li><a href="#"><i>BLOG</i></a>
          </li>
          <li><a href="#"><i>OUR STORY</i></a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

如果您遇到问题，请在下方发表评论。或者标记 CHECK 标记，如果它是解决方案:)

更新
这是输出

Answer 2

您可以使用flexbox进行设置。只需使用以下内容更新您的CSS。

.topnav {
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

更新小提琴click here

Answer 3

将两个元素显示为inline-block（或float：left）应该这样做：

.topnav > img, .topnav > nav {
  display:inline-block;
  vertical-align:middle;
}

您还需要调整导航菜单项的高度（使用行高或填充顶部/底部或两者）