横並びのリストのセンタリング
リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。 <nav class="paging"> <ul> <li><a href="foo">Prev</a></li> <li><a href="bar">Next</a></li> </ul> </nav> というようなマークアップの一般的なページング・ナビゲーションだと、 .paging { text-align: center; } .paging ul { display: inline-table; } .pa
ページ送りのサンプル4種+2
ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
