ブロックレベルの要素に変換せずにスパン内に画像を表示

Question

ここで少し混乱します。私はtxtboxを持っていて、txtboxの右側に、私はヘルプアイコンを挿入したい。私はそれをスパンに挿入しました。問題は、私がこのスパンをブロックにしたくないということです。これをブロックレベルの要素に変換せずにこの画像を表示する方法はありますか？

コードをここに

：

<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span> 

CSS：

#helpico{ background:url(images/question.png) left top; width:16px; height:16px;} 

Answer 1

ラップのdiv内の両方の要素を、スパンにブロックを作成し、入力の両方にfloat: leftのCSSスタイルを与えますスパンタグ。

<div id="wrap"> 
    <input name="firm" type="text" id="firm" size="20" /> 
    <span id="helpico"></span> 
</div> 

そしてCSS

#helpico { 
    background:url(images/question.png) left top; 
    width:16px; 
    height:16px; 
    display: block; 
    float: left; 
} 

#firm { 
    float: left; 
} 

Answer 2

あなたはこのCSSを使用することができます。

#firm 
{ 
    float: left; 
} 
#helpico 
{ 
    background:url(images/question.png) left top; 
    width:16px; 
    height:16px; 
    display: block; 
    float: left; 
} 

あなたは幅と高さを有効にすると、他のスタイルを受け入れるように表示ブロックを使用する必要があります。しかし、あなたの問題を解決するためには、両方の要素を左に浮かべるように設定し、親要素内でインラインのままにしておくことができます。

アイコンがコンテンツに関連する場合は、<img>タグとalt属性に含める必要があることに注意してください。

---

あなたはフロートOR表示ブロックを使用しないことを見た後、左の唯一の方法があり、display: inline-block;を使用しています。

Example for you here。 :)

Answer 3

イメージにimgタグを使用できませんか？それはインラインで表示されます。

通常、imgはあなたのアイコンをかなり高さに表示しません（あまりにも遠くになります）。そのためには垂直方向の整列を使用するか（テキストボトムが機能することが多い）、またはimgのposition：relativeとtop：3px程度を使用してください。

<input name="firm" type="text" id="firm" size="20" /><img id="helpico" src="images/question.png"> 

CSS

#helpico { vertical-align:text-bottom; }