*

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

Media Queriesをwordpressで使ってみた。

Media Queriesをwordpressで使ってみた。 最近「Media Queries」とよく聞くので、使ってみ

no image

パスコード画面でフリーズ(iPhone)

iPhoneが急に不調になりました。。 2日程前から急にメール入力してるときに固まって落ちたりしてたんですが、何度か再起

no image

パララックスサイトを制作時に便利よさげなプラグイン「skrollr.js」

今回は少し触る機会があったのでパララックスを作るときに便利よさげなプラグインをご紹介します。 使用するプラグインは「sk

no image

wordpressの投稿画面でPHPを使えるようにするプラグイン

ということで、前回に引き続きの内容です。 wordpressの投稿画面でPHPを使えるようにするプラグインを入れます。

no image

wordpressでプラグインを使用して動画を表示する

前回の投稿で久しぶりに動画をアップしてみたのですが、一つ疑問が。 通常wordpressに動画を投稿するときは、一般的に

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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