web-dev-qa-db-ja.com

イメージをブロックレベル要素に変換せずにスパンで表示する

私はここで少し混乱しています。 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;}
cssbackground-imageimagehtml
10
themajiks

次のCSSを使用できます。

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

幅と高さを有効にし、他のスタイルを受け入れるには、表示ブロックを使用する必要があります。しかし、「下がる」という問題に対処するために、両方の要素を左にフロートするように設定すると、それらは親要素内にインラインのままになります。

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

Floats OR display blockを使用しないことを確認した後、残っているのは片道だけです。display: inline-block;を使用してください。

ここでの例 。 :)

20
Kyle

両方の要素をdivでラップし、スパンをブロックにして、CSSスタイルのfloat: leftを入力タグとスパンタグの両方に指定します。

<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;
}
1
adarshr

画像に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; }
1
Mathieu van Loon