пунктов меню не в одной горизонтальной линии

Question

Я сделал NavBar с Bootstrap, но элементы не выровнены по одной горизонтальной линии .. как показано на рисунке

я хочу элементы в прямом ... коде как следующий ..

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