css - 在 span 中显示图像而不将其转换为 block 级元素

Question

我在这里有点困惑。我有一个文本框，在文本框的右侧，我想插入一个帮助图标。我已将其插入跨度。问题是我不想让这个跨度成为一个街区，因为它会下降。有没有其他方法可以在不将其转换为 block 级元素的情况下显示此图像？

代码在这里:

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

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

请注意，如果图标与内容相关，则应包含在 <img> 中。标记和 alt 属性。

---

看到你不想使用 float 或显示 block 后，只剩下一种方法，使用 display: inline-block; .

Example for you here .:)