いつも忘れて思い出すのに時間がかかるCSSテクニック集

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;に適応してるという、さすがキマグレン。

↑ページトップへ

HOMEへ