Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS]文字の長さだけinline-blockで装飾する

css-inline-block

CSSってなんて便利なの!CSSでボタンを作れば画像で作る手間が省けます。作業効率が格段に上がります。
要素にborderや、display:blockでボタンにする場合、一行まるごとCSSが適応されてしまいます。

そんな時は、display: inline-block; を追記すると、文字がある長さだけ装飾する事ができます。paddingで余白を整える事で簡単にボタンの様にする事ができます

a{
display: inline-block;
margin-left: 6px;
white-space: nowrap;
padding: 1px 4px;
border-radius: 3px;
text-decoration: none;
}

この記事は2015年11月に旧ブログに書いたものを引っ越しさせました。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

INDEX
閉じる