-1

私は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のサーバーによって生成されます。

4

1 に答える 1

0

position:absolute を削除して、次のように記述します。

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-08T07:40:07.600 に答える