內聯塊因相對定位而混亂
[英]inline-block messes up with relative positioning
問題描述
我有以下代碼：
<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>
除非我刪除display：inline-block屬性，否則第二個div不會位於32 x位置。 有沒有解決的辦法？
編輯：如果我刪除display：inline-block，它似乎有效，但滾動條將水平顯示（因為div需要一些不可見的空間）。
2 個解決方案
解決方案1
1 已采納 2010-01-17 12:40:53
你應該使用方式position:absolute元素在內部position:relative時顯示position:relative 。
另外，要避免水平滾動條，請使用overflow-y 。
工作示例： http ： //jsbin.com/uveni3
解決方案2
0 2011-09-12 01:20:32
使用“內聯塊”屬性時，應始終以DTD格式啟動HTML開始標記。 放置一個應該解決這個問題。
相對於內聯塊div的文本定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.