*

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

モバイルの初期入力モードの設定

今更なんですけど、書いてないと混乱するのでメモ。 htmlでは、「istyle(docomo)」「format(au)」

stinger3

wordpressのテーマを「STINGER3」に変更するときはプラグインに注意

超今更なんですが、会社の人に教えてもらったのでテーマを「STINGER」に変更してみました。 テーマとしてはすごい有名な

camera

WordPressでプラグインなしでURLを指定してスクリーンショットを表示する方法

WordPressでスクリーンショットを表示させることって、ちょいちょいあります。 てっきりプラグインなのかと思ってまし

no image

久しぶりのデザイン案件だよ!

たぶん1からのデザイン作成は約10ヶ月ぶりくらい? 派遣の身なので、デザイン案件がくることは無いと思ってけど、予想外に発

p1

:beforeや:afterを使用した際、アイコンとテキストの上下を中央に合わせる

毎回やり方を忘れてしまうので自分用のメモです。 ※スマホ用でやってるので、IEなどのブラウザでは確認してません

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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