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>标记和alt属性。

在看到您不想使用浮动或显示块之后，只剩下一条路，使用display: inline-block;。

Example for you here。：）

Answer 2

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

Answer 3

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

通常情况下，img不会在相当高的位置显示您的图标（它会太远）。使用vertical-align（通常是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; }

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

3 个答案: