HOME > ページ分割の、ページングナビゲーションはこうして作るの巻
よくある、ページ分割型のページングナビゲーション↓。
HTML
<ul class="example05">
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
CSS
.example05 li {
display: inline;
}
.example05 li strong {
display: -moz-inline-box; /* Firefox2対策用 */
display: inline-block;
padding: 2px 7px 4px;
background: #EEE;
border: 1px #CCC solid;
}
.example05 li a {
display: -moz-inline-box; /* Firefox2対策用 */
display: inline-block;
padding: 2px 7px 4px;
border: 1px #CCC solid;
}
.example05 li a:hover {
border: 1px solid #2D88B3;
background: #2D88B3;
color: #FFF;
}
【ポイント】
<li>にdisplay: inline-block;をかけてあげてインライン要素にしてあげると、
floatを使わなくても横並びにすることができちゃう。今回はコレが重要。
でも、display: inline-block;はインライン要素でも幅や高さの概念を持つ、
ブロック要素のような一面も持っている二重人格者なので、
今回はコイツを利用して、数字を囲むボックスを作ることができる。
ちなみに、display: -moz-inline-box;は、Firefox2以前はinline-box;を認識しないので、対策用のハック。
以外にIE6は、inline-box;に適応してるという、さすがキマグレン。
© netdehatch.com