ページネーションを実装していますが、中央に配置する必要があります。問題は、リンクをブロックとして表示する必要があるため、フロートする必要があることです。しかし、そうするとtext-align: center;機能しません。ラッパー div に左のパディングを与えることで実現できますが、ページごとにページ数が異なるため、機能しません。これが私のコードです。
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->私が望んでいるアイデアを理解するには:
ベストアンサー1
を削除してfloatを使用するとinline-block問題が解決する場合があります。
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
( で始まる行を削除し-、 で始まる行を追加します+。)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->inline-block要素が元々インライン要素である限り、IE6 でもクロスブラウザで動作します。
引用元癖モード:
インライン ブロックはインライン (つまり、隣接するコンテンツと同じ行) に配置されますが、ブロックとして動作します。
これは多くの場合、フロートを効果的に置き換えることができます。
この値の実際の使用法は、インライン要素に幅を指定したい場合です。状況によっては、一部のブラウザでは実際のインライン要素に幅を指定できないことがありますが、display: inline-block に切り替えると幅を設定できます。”(http://www.quirksmode.org/css/display.html#inlineblock）。
からW3C仕様:
[inline-block] は、要素にインライン レベルのブロック コンテナーを生成させます。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベル ボックスとしてフォーマットされます。