増えてきたソーシャルボタンを横に綺麗に並べるCSS

2014年07月01日（Tue）

「CSS」の「flot」を使ってそのままソーシャルボタンを並べると上揃いで下が少しだけデコボコしてしまいます。
今までは「padding」などで微調整して下揃え風にしてたのですが、ソーシャルボタンが増えてきて「もう、面倒くさい！」となり、色々試した結果「display:inline-block;」に辿り着きました。

「vertical-align」プロパティが適用できるのは「インライン要素」と「テーブルセル」

今回は、ソーシャルボタンを下揃えにしたいので「vertical-align」プロパティが使いたいと考えていて、調べてみると「vertical-align」が使えるのが、インライン要素とテーブルセルだと分かりました。あとは、スマホでの表示具合などを見ながら試してみました。

「テーブルセル」を試してみた

「display」プロパティの「table」要素と「table-cell」要素を使って試したところ、理想通りに表示されました。
ただ、スマホなどの小さい画面で見る場合、テーブルが横にはみ出てレイアウトが崩れてしまうので却下です。

「インライン要素」を試してみた

「display」プロパティの「inline」要素を試しました。こちらもパソコン用サイズの場合は、問題ないのですがスマホなどの小さい画面だと縦並びと横並びが入り混じって駄目です… しかし、「inline-block」を試してみるとスマホでも綺麗に表示され問題が全て解決しました。

CSS

/* マーカーを使用しない設定（無くてもマーカーは表示されませんが念の為） */
.sns{ list-style-type:none; }
/* display:inline-block;を指定 */
.sns li{
	display:inline-block;
	margin-right:5px;
	vertical-align:bottom;
	*display: inline;	<!-- IE用のハック -->
	zoom: 1; 		<!-- IE用の hasLayout を true にするための記述 -->
}

html

<ul class="sns">
	<li>ソーシャルボタン</li>
	<li>ソーシャルボタン</li>
	<li>ソーシャルボタン</li>
	<li>ソーシャルボタン</li>
	<li>ソーシャルボタン</li>
</ul>

ソーシャルボタンの表示例：

注意点は、「display: inline-block 」は、IE７以下のオールドブラウザではキチンと表示されないようです。

【参考Webサイト】

CSSの display: inline、display: block、display: inline-block をマスターしよう！

コメント（0件）

増えてきたソーシャルボタンを横に綺麗に並べるCSSに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
増えてきたソーシャルボタンを横に綺麗に並べるCSS