为什么我的第一个内联块元素上面有空间
问题描述:
我在容器内部有内联块元素,应该从容器的左上角开始显示所有元素。出于某种原因,第一个元素显示在它应该在的位置下面。我尝试了保证金和填充重置,但是在检查时无论如何都没有保证金或填充。为什么我的第一个内联块元素上面有空间
下面是HTML(无空格所以他们不破坏布局):
<div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div>
这里是CSS:
.nav {
position: relative;
width: 80%;
height: 50px;
background-color: red;
z-index: 1;
}
.nav .logo {
display: inline-block;
width: 10%;
height: 100%;
background-color: #f90;
}
.nav ul {
display: inline-block;
width: 90%;
text-align: center;
}
.nav li {
display: inline-block;
height: 100%;
line-height: 50px;
width: 20%;
background-color: grey;
}
.nav li a {
margin: 0;
}
这里是一个codepen显示问题:
答
它们并不排队,因为它们的垂直对齐是baseline
,如果将它们设置为top
,他们会排队:
.nav .logo {
display: inline-block;
vertical-align: top;
width: 10%;
height: 100%;
background-color: #f90;
}
.nav ul {
display: inline-block;
vertical-align: top;
width: 90%;
text-align: center;
}
非常感谢你。最后用于垂直对齐属性 – Wryte 2013-03-22 01:18:39