3

このチュートリアルに従って、アイコン付きの CSS 3 ボタンを作成しています。しかし、このチュートリアルのアイコンの高さの問題はfont-size. テキストのフォントサイズを大きくするとアイコンがうまく収まりますが、フォントサイズを小さくしようとするとうまく収まりません.使用している画像は40x30です

a.button {
  background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #dbdbdb));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
  border: 1px solid #fff;
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  padding: 5px 5px;
  text-decoration: none;
  text-shadow: #fff 0 1px 0;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  display: block;
  color: #597390;
  line-height: 38px;
  font-size: 15px;
  font-weight: bold;
}
a.button:hover {
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #eeeeee));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee')";
  color: #000;
  display: block;
}
a.button:active {
  background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #dbdbdb),color-stop(1, #ffffff));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
  text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
  margin-top: 1px;
}
a.button {
  border: 1px solid #979797;
}
a.button.icon {
  padding-left: 11px;

}

a.button.icon span{
  padding-left: 48px;
  display: block;
  background: url(../img/gmail2.png) no-repeat;
}
4

2 に答える 2

2

あなたの発言は少しあいまいで、質問が不足していますが、私は突き刺します.

このシナリオでfont-sizeは、 はアイコンの高さを決定するため、常に小さな要素を果たします。ある時点で、ボタンのサイズに関する詳細を知る必要がありますが、フォントの影響を受ける必要はありません。ボタンを設定するheightとimg{ height:100%; }、画像が領域に合わせて拡大/縮小されます。

<div id="container">
    <h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>

と組み合わせ

#container{
    border: 2px solid black;
    width: 200px;
    height: 20px;
}
#container img{
    height:100%;
}

探しているものに近いものが得られるはずです。これを実現する 1 つの方法を示すために、小さなjsfiddleを作成しました。

于 2013-02-01T03:25:37.693 に答える
1

あなたがあなたのコードを共有することができればそれは役に立ちます。
あなたが提供したリンクのcss3ボタンの例では、フォントサイズを小さくして次のCSSスタイルを設定すると機能します。

span { display: block; }

spanボタン内のテキストを折り返すタグです。

于 2013-02-01T03:03:48.527 に答える