以span显示图像而不将其转换为块级元素

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

你可以使用这个CSS:

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

您必须使用显示块来启用宽度和高度并接受其他样式.但是为了解决你的"向下"的问题,你可以设置两个元素向左浮动,它们将保持在父元素内联.

请注意,如果图标与内容相关,则应包含<img>tag和alt属性.

看到你不想使用浮动或显示块后,只剩下一条路,使用display: inline-block;.

你在这里的例子.:)

Answer 2

float: left将这两个元素包装在一个 div 中，使 span 成为一个块，并为 input 和 span 标签提供 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;
}