*

table-cellで横並びさせるときに余白を入れる

   

ようやくスマホをする機会が増えてきた…個人的によく引っかかるのでメモです。

display:table-cellを使った横並びのものに余白を入れたいとき。(こんなの↓)

btn_narabi

スポンサードリンク
【HTML】
<section>
	<ul>
		<li><a href="#">ボタン1</a></li>
		<li><a href="#">ボタン2</a></li>
		<li><a href="#">ボタン3</a></li>
	</ul>
</section>

【CSS】
section {
	width:100%;
}
ul{
	display:table;
	border-collapse: separate;  /* ←ココで余白 */
	border-spacing: 10px 0;  /* ←ココで余白 */
	width:100%;
	margin:10px 0;
}
ul li{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
ul li a{
	display:block;
	height:40px;
	line-height:40px;
	background:#666;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color:#FFF;
	text-decoration:none;
}

参考サイト
【スマホサイト】display:table-cellにmarginを指定したい

横並び関連は色々やり方あるんでしょうが、table-cellで余白キレイにいけるんなら一番簡単なのかなと思ったり。
まだスマホは自分の中で整理されてないので模索中。

 -Web

Sponsored link

Sponsored link

  関連記事

no image

docomoのXHTMLでCSSをきかせる

また今更なメモです。 ※新しい機種は、これ入れなくても実機での確認はできてる様子? ++++++++++++++++++

no image

evernoteの改行削除なおったんすか?

世間的に大絶賛の「EVERNOTE」。 EVERNOTE 自分一度使ってみたけどすぐ使わなくなりました。 なんでかいうと

no image

デザインリンク集のまとめ(2012年2月現在)

そこそこ必要になるので、自分用に整理してみました。 【WEBサイト編】 ■ikesai.com カテゴリから検索可能 ■

WebデザイナーもiPhoneアプリ作れるとな。

http://appliya-inc.com/ja/oem/ プログラムがわかんなくてもアプリ作れちゃう時代がくるらしい

jquery mobile デモページ

そろそろjquery mobile触っておくべき?

ふと思い立ったので、そろそろ触っておくべきか?ということでjquery mobileを触ってみました。 簡単にメモ。 デ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

  • ブログランキング・にほんブログ村へ