所以,我有一个导航栏,然后是一个 <ul>
其中有一些<li>
里面。我希望它与导航栏垂直对齐 .navbar
但似乎不起作用。安迪有人知道我做错了什么吗?
这是 fiddle 和代码:http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li><a href="#">Shop</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
谢谢!
最佳答案
如果我理解你想要实现的目标。然后你应该使 Logo 绝对定位,然后可以使用line-height
对齐ul
。完整的CSS:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
并更新fiddle
关于html - 导航栏垂直对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25044341/