html - 菜单项不在同一水平线上

Question

我用 Bootstrap 制作了一个 navBar ，但元素没有在同一水平线上对齐..如图

我想要直线上的元素...代码如下..

nav ul {
  text-align: right;
  margin-right: 20px;
  display: inline-block;
}

nav li {
  display: inline-block;
}

#mainmenu ul li {
  display: inline-block;
}

.navbar-custom .navbar-nav>li>a {
  /* to give font color to the menu text */
  color: #44546a;
  font-size: 1.4 em;
  font-size: large;
  margin-top: 26%;
  display: inline-block;
  font-weight: bold;
}

#navbarhomepage {
  padding-left: 7%;
  padding-right: 7%;
  padding-top: 2%;
  overflow: visible !important;
  /* to show drop down menus */
  background-color: White;
}

<nav class="navbar navbar-custom navbar-fixed-top" id="navbarhomepage">
  <div class="container-fluid">
    <img src="Image/LOGO/logo.png" class="img-responsive" alt="" />
    <%--<nav class = "navbar navbar-custom">--%>
      <div class="navbar-header ">
        <button id="Button1" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainmenu">

<span class ="icon-bar "></span>
<span class ="icon-bar "></span>
<span class ="icon-bar "></span>
</button>

      </div>
      <div class="collapse navbar-collapse" id="Div1">
        <ul class="nav navbar-nav  navbar-right">
          <li><a href="homepage.aspx" title="home">Home </a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="Company" role="button" aria-haspopup="true" aria-expanded="false">Company </a>
            <ul class="dropdown-menu">
              <li><a href="AboutUS.aspx" title="About Us">About Us</a></li>
              <li class="divider"></li>
              <li><a href="thegroup.aspx" title="The Group">The Group</a></li>
              <li class="divider"></li>
              <li><a href="partners.aspx" title="Partners">Partners</a></li>
              <li class="divider"></li>
              <li><a href="customers.aspx" title="Customers">Customers</a></li>
              <li class="divider"></li>
              <li><a href="dearlers.aspx" title="Dealers">Dealers</a></li>
              <li class="divider"></li>
            </ul>
          </li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" title="Product">Product </a>
            <ul class="dropdown-menu">
              <li><a href="productrange.aspx" title="Product Range">Product Range</a></li>
              <li class="divider"></li>
              <li><a href="productgallary.aspx" title="Product Gallary">Product Gallary</a></li>
              <li class="divider"></li>
              <li><a href="technology.aspx" title="Technology">Technology</a></li>
              <li class="divider"></li>
              <li><a href="qualitycertificate.aspx" title="Quality Certificate">Quality Certificate</a></li>
              <li class="divider"></li>
            </ul>
          </li>

          <li class="divider-vertical"></li>
          <li><a href="#" title="Career">Career </a></li>
          <li class="divider-vertical"></li>
          <li><a href="#" title="Contact Us">Contact Us </a></li>
          <li class="divider-vertical"></li>
          <li><a href="login2.aspx" title="Login"><span class="glyphicon glyphicon-log-in" title = "Login" ></span> Login</a></li>
        </ul>

      </div>

  </div>
</nav>

我感谢任何形式的帮助。亲切的问候

Answer 1

对于 inline-block 元素添加 vertical-align: middle