内联块因相对定位而混乱
[英]inline-block messes up with relative positioning
问题描述
I have the following code: 
我有以下代码：
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. 除非我删除display：inline-block属性，否则第二个div不会位于32 x位置。 Is there a way around this? 有没有解决的办法？
Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space). 编辑：如果我删除display：inline-block，它似乎有效，但滚动条将水平显示（因为div需要一些不可见的空间）。
2 个解决方案
解决方案1
1 已采纳 2010-01-17 12:40:53
You should use the way position:absolute elements are displayed when inside position:relative . 你应该使用方式position:absolute元素在内部position:relative时显示position:relative 。
In addition, to avoid the horizontal scroll bar, use overflow-y . 另外，要避免水平滚动条，请使用overflow-y 。
Working example: http://jsbin.com/uveni3 工作示例： http ： //jsbin.com/uveni3
解决方案2
0 2011-09-12 01:20:32
When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. 使用“内联块”属性时，应始终以DTD格式启动HTML开始标记。 placing one there should resolve this. 放置一个应该解决这个问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.