我有一个容器内部的内嵌块元素,应该从容器的左上角开始显示。由于某些原因,第一个元素显示在它应该在哪里。我尝试过边距和填充复位,但是当被检查时,没有余量或填充。
这里是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; }
这是一个显示问题的代号:
解决方法
他们不排队,因为他们的垂直排列是基线,如果你将它们设置为顶部,他们将排队:
.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; }