在跨度中显示图像而不将其转换为块级元素

Posted 2023-03-05

【中文标题】在跨度中显示图像而不将其转换为块级元素

【英文标题】：Display an image in span without converting it to a block level element

【发布时间】：2011-07-01 22:36:51

【问题描述】：

我在这里有点困惑。我有一个 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;

【问题讨论】：

我也不想浮动它。对此感到抱歉。

为什么不呢？这是最好的方法！

做一件事。为您的输入标签设置display: inline。

【参考方案1】：

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

【参考方案2】：

你可以使用这个 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;。

Example for you here。 :)

【讨论】：

链接失效，请修复

【参考方案3】：

你不能为图片使用 img 标签吗？这将显示内联。

通常，img 不会在相当高的位置显示您的图标（它会太高）。为此使用垂直对齐（通常 text-bottom 会起作用）或使用 position:relative 和 top:3px 等 img。

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

css

#helpico  vertical-align:text-bottom;