javascript - 在特定背景颜色上创建菜单标题导致对齐出错

Question

我正在为我的网页制作菜单标题。

这是我的 jsfiddle .

我所有的图片和文字都应该保持那种灰色，但不知何故它变得乱七八糟。
图像显示在底部，灰色的高度应该稍微高一点，这样看起来就不错了。

我不确定我做错了什么。这是我的 html 和 CSS:

<div class="topnav">
  <ul>
    <li class="home">
      <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
    </li>
    <li class="dropdown">
      <a href="#"><b>INSURANCE</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="our-story">OUR STORY</li>
    <li class="login-signup">Log In | Sign up</li>
    <li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
  </ul>
</div>

我的 CSS:

li.insurance{
  margin-right: 60px;
}
li.home{
  margin-right: 60px !important;
  position: relative;
  top: 15px;
  left: 10px;
}
li.our-story{
  margin-right: 120px !important;
}
li.login-signup{
  margin-right: 20px !important;
  font-style: italic;
  font-family: fontawesome;
}
li.get-covered{
   border-color: #EF7440;
   border-style: solid;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 30px;
   padding-right: 30px;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 20p;
  padding-bottom: 40px;
  background-color: rgba(0, 0, 0, 0.5);
}
li.home{
  margin-right:35px;
}
li{
  display: inline;
}
.topnav{
  overflow: hidden;
}
.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;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
  display: none;
  margin-top: 14px;
  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

所以..这里有很多问题，但我猜你正在寻找这样的东西:

https://jsfiddle.net/3kw1uLrs/35/

我添加的代码如下，我删除了您添加的 ul 样式。我在 topnav 元素上使用了背景色。您可以以此为基地继续您的工作。

.topnav {
  background:rgba(0, 0, 0, 0.5);    
  padding:0 15px;
}
.logo {
  float:left;
  margin-top:15px;
}
.nav-left {
  float:left;  
}
.nav-right {
  float:right;
}

我还将 Logo 从列表中取出并将其放在 anchor 元素中 - 您很可能需要它来链接到您的主页:

 <a class="logo">
   <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
 </a>

一些提示:

• 您不应尝试将所有内容作为 li 元素放在单个 ul 下。
  在这种情况下，我将 Logo 从列表中取出，并将您的列表分成两个单独的列表以相应地放置它们。
• 切勿使用边距定位元素。
  尝试将它们分组并使用 float 、文本居中等方式放置它们。