*

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

  関連記事

達人記念

iPhoneアプリの湯切り名人で達人とれたぞ記念。 さらに上には仙人とやらがあるらしい。

no image

docomoのXHTMLでCSSをきかせる

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

no image

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

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

placeholderを指定したときにAndroidでテキスト表示位置を中央にしたい

スマホサイト作ってた時にハマったことがあったのでメモです。 現象: placeholderを設定した際、iPhoneでは

CSS3の「border-image」プロパティを使ってborderが斜線の枠を作る

あまり使う機会はないかもしれませんが、上記のようにDIVの枠線をデザインしたい場合に使用します。 1)背景用の画像を作成

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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