3

このボタンがあり、左側に画像を表示したいのですが、テキストが必要です

ボタンの中に好きなように配置できます。いくつかの方法を試しましたが、配置できませんでした

私が望んでいた方法のテキストと画像。

 <button class ="buttn"> Click Here <img src ="./logo.png"> </button>
4

2 に答える 2

2 
.buttn{
    background:transparent url(/logo.png) no-repeat left;
    border:0;
    padding-left: xxxpx; // this is how wide the image is plus any additional padding
}

<button class="buttn">Click Here</button>

パスは正しいものに置き換える必要があります。基本的には、画像を背景として設定し、デフォルトのボタン スタイルを削除してから、テキストが期待どおりに配置されるまでパディングを調整します。

倍数:

.buttn{
    background-image:url(/logo.png), url(/gradient.png);
    background-repeat:no-repeat, repeat-x;
    background-position:center left, center left;
}

ちなみに、グラデーションに画像を使用する必要はありません。複数の背景を持つことができることを示しているだけです。

于 2012-11-14T00:43:51.717 に答える
0

ボタンに画像を入れたことはありません。それを示していないと思います。その場合、フロート左（またはボタンと同じデメンソン）と相対位置でdivにボタンをラップします。必要な場所に絶対配置で画像を配置します。ボタンにパディングを使用して、テキストを好きなようにプッシュします。パディングが機能しない場合は、テキストをスパンでラップし、AP にします。

すべてのブラウザーで動作する場合、カイの回答はよりクリーンです。

于 2012-11-14T00:46:22.137 に答える