ページ切り替えで使用することを想定した横型のメニューです。
/* --- ページングエリア --- */ .paging { margin: 20px 0; } /* --- メニューエリア --- */ .paging .nl { margin: 0; padding: 4px 0; /* メニューのパディング(上下、左右) */ list-style-type: none; text-align: center; /* メニューのセンタリング */ font-size: 80%; /* メニューの文字サイズ */ } /* --- メニュー項目 --- */ .paging .nl li { display: inline; margin-right: -1px; /* 項目の右マージン */ } /* --- リンク --- */ .paging .nl li a { display: inline-block; padding: 4px 8px; /* リンクエリアのパディング(上下、左右) */ background-color: #ffffff; /* リンクエリアの背景色 */ border: 1px #c0c0c0 solid; /* リンクエリアの枠線 */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .paging .nl li a:hover { background-color: #e0e0e0; /* ポイント時の背景色 */ border: 1px #999999 solid; /* ポイント時の枠線 */ text-decoration: underline; /* テキストの下線(あり) */ } /* --- アクティブな項目 --- */ .paging .nl li strong { display: inline-block; padding: 4px 8px; /* 項目のパディング(上下、左右) */ background-color: #e0e0e0; /* 項目の背景色 */ border: 1px #c0c0c0 solid; /* 項目の枠線 */ color: #cc0000; /* 項目の文字色 */ } /* --- リンクしない項目(前へ・次へ) --- */ .paging .nl li span { display: inline-block; padding: 4px 8px; /* 項目のパディング(上下、左右) */ background-color: #ffffff; /* 項目の背景色 */ border: 1px #c0c0c0 solid; /* 項目の枠線 */ color: #808080; /* 項目の文字色 */ }
<div class="paging"> <ul class="nl"> <li><span>< 前へ</span></li> <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> <li><a href="#">次へ ></a></li> </ul> </div> <div class="paging"> <ul class="nl"> <li><a href="#">< 前へ</a></li> <li><a href="#">1</a></li> <li><strong>2</strong></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> <li><a href="#">次へ ></a></li> </ul> </div>
このサンプルでは、ブラウザにより以下のような違いが出てしまいます。
ul要素の枠線を表示した例(スクリーンショット)
Firefoxに合わせて設定すると、IEではul要素内の上下に4px程度の余白が入ってしまいます。そのため、このメニューは上記の違いが目立たない場所で使用するようにしてください。