Question

尝试使顶部菜单居中且宽度与下面的菜单相同。因此，将社交媒体图标向右推，将菜单项向左推，与下面的主导航菜单保持一致。示例是：https://www.nelsonforensics.com/，因为两个菜单都被完美地显示了。我们的网站是：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主题或其他东西生成的。

您的顶部InkWell与您的#navbar不对齐，因为.main_menu具有引导.main_menu类。

一种快速的解决方案是将container类也添加到导航栏的container中。您还需要删除ul的{{1}}规则，因为它会覆盖默认的margin: 0保证金规则（如果需要，您可以显式设置#navbar ul。

最后，我想您需要在您的.container中添加相同的黑色margin-bottom: 0，因为现在将其包含进去可能看起来有点尴尬-但这是设计决定（我不是设计师）。

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

background-color

#navbar

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

1 个答案: