*

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

今更ながらのZen-Coding

もう半年前くらいに盛り上がってたような気がする「Zen-Coding」。 すんごい今更入れてみました。 macなら「Co

お仕事で使えるフリーで商用利用可の写真素材とアイコン素材のサイト

あんまりやらない素材集の紹介です。 10年前くらい(゜゜)…って、まだ写真素材とかも割りと海外のフリーのものを頑張って探

土地探し目的の人でも「Bing不動産」サイトは割りと使えると思った件

はてぶで紹介記事が載ってるのを見て、「どうせまた関東だけなんでしょ」と期待せずに閲覧してみたら、意外と使えるかもねと思っ

no image

チキンラーメン

キッズ向けゲームと食育の「チキラー島」 よくありそうなんだけど、こんなサイト好きです〜。 作るのめんどくさいだろうなぁ〜

no image

WordPressのヘッダーのメニュー表記をカタカナから英語に変更する方法

例えば、メニューなどで「ホーム」と表記されてる箇所を「Home」に変更したい場合など。 1)/wp/wp-content

コメントを残す

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


*

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

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

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

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

実は先月で退職しました

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

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