floatで横並びにしたli(リスト)をセンターにする方法｜M2NET

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04 608 1525

ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。

＜CSS＞

div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;}

div.pager ul{ float:left; position:relative; left:50%;}

div.pager ul li { float:left; position:relative; left:-50%;}

div.pager li{ float:left; margin-right:5px; border:1px #DEE solid;}

div.pager li.prev,

div.pager li.next{ border:none;}

div.pager li a{ padding:8px 12px; display:block; color:#4AC;}

div.pager li a:link,

div.pager li a:visited{ text-decoration:none;}

div.pager li a:hover,

div.pager li a:active{ background-color:#EFF; text-decoration:none;}

div.pager li em{ display:block; padding:8px 12px; background:#4AC; color:#FFF;}

↑ポイントになるのは最初の3行。親ボックスとul、liにposition:relative;を使用しています。

＜HTML＞

<div class="pager">

    <ul>

        <li><em>1</em></li>

        <li><a href="/search/?p=2">2</a></li>

        <li><a href="/search/?p=3">3</a></li>

        <li><a href="/search/?p=4">4</a></li>

        <li><a href="/search/?p=5">5</a></li>

        <li><a href="/search/?p=6">6</a></li>

        <li><a href="/search/?p=7">7</a></li>

        <li><a href="/search/?p=2" class="next">NEXT</a></li>

    </ul>

</div>

関連タグ:
ページャー
pager

カテゴリ: CSS

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

まりりん2020年1月29日

はじめまして!
私も全く同じとこで詰まってかなりググったのですが、なかなか見つけられずで、いろいろ検索ワードを変えてるうちにここにたどり着きました。"" が駄目な時は nullを使えと!!
なるほどです。無事にうまく出来ました。本当にどうもありがとうございました～～～!!!

1 返信

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る

コメントをする

目が疲れている方向けにラジオ系Youtubeを始めました

2022年は長期投資の安全神話が崩壊？４月過去最大級の大暴落。米国株の今後の見通...

【鬱の知識】精神的なもろさは体力低下による要因が大きい！精神を弱くして鬱や無...

物価上昇により食糧難になるのか？貧民は昆虫食でもしてろってシナリオ！？エネル...

健康寿命の根源は細胞の活性化！筋トレの重要性を究極的に要約しました

【癌の知識】若い世代の乳がん急増加!原因は乳製品の過剰摂取。パン食習慣が危険の...

医者とビジネス展開中のホリエモン発言「さっさと打って集団免疫完成させよう」堀...

オススメのCSSに関する記事