我做了一个带引导的导航条,但是项目没有在同一水平线上对齐。。如图所示
我想要直线的东西。。。代码如下。。
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>
我很感激你的帮助。亲切的问候
最佳答案
对于inline-block
项,添加vertical-align: middle
关于html - 菜单项不在同一水平线上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42336214/