如何防止列表項在絕對定位的div中重疊？

-1

我有一個div，裏面的div是列表項。每個列表項都需要低於其他列表項，因此列表屬性的默認值爲。然而，圍繞它的div 需要被絕對地定位，以防止它所在的div的重新調整大小，並且設計工作。但是，當父div完全定位時，每個列表項都會重疊。將列表項目定位爲相對不能解決問題。如何防止列表項在絕對定位的div中重疊？

HTML：

{block:Pagination} 
<div class="pagination"> 
{block:PreviousPage} 
    <a href="{PreviousPage}"><img id="pagination"  
src="http://static.tumblr.com/txc9jrr/JlWmd5ncd/previouspage.png"></a> 
    {/block:PreviousPage} 

{block:JumpPagination length="5"} 
<ol class="jumpPage"> 
      {block:JumpPage} 
      <li class="jumpPageNumber"> 
       <a class="jump_page" href="{URL}">{PageNumber}</a> 
      </li> 
      {/block:JumpPage} 
</ol> 
{/block:JumpPagination} 

{block:NextPage} 
    <a href="{NextPage}"><img id="pagination" 
src="http://static.tumblr.com/txc9jrr/9Wtmd5mxb/nextpage.png"></a> 
{/block:NextPage} 
</div> 
{/block:Pagination}

CSS：

.pagination { 
display:inline-block; 
} 

#pagination { 
width:28px; 
height:28px; 
margin:0 0 -6px 0; 
} 

ol.jumpPage { 
position:absolute; 
} 

.jumpPageNumber { 
list-style:none; 
} 

a.jump_page { 
color:#ababab; 
background:#FF0000; 
}

元素通過的tumblr的服務器生成的，而不是我的列表。

來源

2012-11-08 Earl Larson

壞標記先給李裏面UL或OL – sandeep

我試圖與相同的結果。 –

您可以在http://jsfiddle.net中創建示例以更好地理解 – sandeep

刪除的位置是：絕對&這樣寫：

CSS

#navigation > *{ 
vertical-align:top; 
}

HTML

<ol class="jumpPage"> 
<li class="jumpPageNumber"> 
    <a href="/page/2" class="jump_page">2</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/3" class="jump_page">3</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/4" class="jump_page">4</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/5" class="jump_page">5</a> 
</li> 
</ol>

來源

2012-11-08 07:40:07 sandeep

這沒有奏效。雖然它們不再重疊（由於刪除了絕對位置），但它們仍然影響其父分區內的其他元素。 –

你可以給一個快照如何想 – sandeep

earlcoding.tumblr.com右下方的列表應該在底部欄之外，不影響其他元素。另外，感謝您的幫助！：-）非常感激。 –

如何防止列表項在絕對定位的div中重疊？

回答

相關問題