试图使两个导航菜单的宽度相同

Question

正在尝试使顶部菜单居中且宽度与下方菜单相同。因此，将社交媒体图标向右推，将菜单项向左推，以与下方的主导航菜单对齐。例如：https://www.nelsonforensics.com/ as both the menus are ligned up perfectly. Our Website is: http://www.stephensengineering.com/stephens33/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type="text/css"> 
<!-- 

#navbar ul { 
  height: inherit;
  /* margin: 0; REMOVE THIS*/
  list-style-type: none;
  text-align: right; 
  background-color: #000; 
}

#navbar ul li {  
    display: inline-block; 
    padding: 10px 5px;
  height: inherit;
  border-left: 1px dashed #fff;
    } 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #fff; 
    } 
#navbar ul li:hover a { 
    color: #000 !important; 
    } 

    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) {
  border-right: 1px dashed #fff;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 15px;
  vertical-align: top;
}

 .submit-btn {
  background-color: green !important;
  border-left: 1px dashed #fff !important;
  }
--> 
</style> 
</head> 
<body> 
<!--  -->
<div id="navbar"> 
  <ul class="container"> 
      <ul>
        <li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!--  --><li><a href="tel:+18883000642">888-300-0642</a></li><!--  --><li><a href="http://www.stephensengineering.com/stephens33/stephens-university/">Stephens University</a></li><!--  --><li class="submit-btn" ><a href="http://www.stephensengineering.com/stephens33/submit-assignment/">Submit Assignment</a></li> 
      </ul> 
    </div>
</body> 
</html>

Answer 1

标记和 css 有点乱，很可能是由 wordpress 主题或其他东西生成的。

您的顶部 #navbar 与您的 .main_menu 不对齐，因为 .main_menu 具有 bootstrap container class。

一个快速的解决方案是将 container class 添加到导航栏的 ul 中。您还需要删除 #navbar ul 的 margin: 0 规则，因为它会覆盖默认的 .container 保证金规则（如果需要，您可以明确设置 margin-bottom: 0。

最后，我想您需要将相同的黑色 background-color 添加到您的 #navbar 中，因为现在它可能看起来有点尴尬 - 但这是一个设计决定（而且我不是设计师）。

所以，我重复更改过的代码。

#navbar ul { 
  height: inherit;
  /* margin: 0; REMOVE THIS*/
  margin-bottom: 0; /* Suggested */
  list-style-type: none;
  text-align: right; 
  background-color: #000; 
} 

/* Suggested for aesthetic reasons */
#navbar {
  background-color: #000;
}

<div id="navbar"> 
  <ul class="container">

  </ul> 
</div>

试图使两个导航菜单的宽度相同

Trying to make the two navigation menus the same width

html

css

menu