Html 在跨度中显示图像而不将其转换为块级元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5077530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display an image in span without converting it to a block level element
提问by themajiks
I am a little confused over here. I have a txtbox and to the right of the txtbox, i want to insert a help icon. i have inserted that into a span. the problem is that i dont want to make this span a block because it goes down then. is there any other way to display this image without turning this into a block level element?
我在这里有点困惑。我有一个 txtbox，在 txtbox 的右侧，我想插入一个帮助图标。我已将其插入跨度。问题是我不想让这个跨度成为一个块，因为它会下降。有没有其他方法可以显示此图像而不将其转换为块级元素？
The Code goes here:
代码在这里：
<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span>
The CSS:
CSS：
#helpico{ background:url(images/question.png) left top; width:16px; height:16px;}
回答by Kyle
You can use this CSS:
你可以使用这个 CSS：
#firm
{
float: left;
}
#helpico
{
background:url(images/question.png) left top;
width:16px;
height:16px;
display: block;
float: left;
}
You have to use display block to enable widths and heights and to accept other styles. But to counter your issue of it "going down" you can set both the elements to float left and they will remain inline within the parent element.
您必须使用显示块来启用宽度和高度并接受其他样式。但是为了解决它“下降”的问题，您可以将两个元素都设置为向左浮动，并且它们将在父元素内保持内联。
Be aware that if the icon is relative to the content, it should be included with <img>tag and an alt attribute.
请注意，如果图标与内容相关，则应将其包含在<img>标签和 alt 属性中。
After seeing that you don't want to use floats OR display block, there is only one way left, use display: inline-block;.
看到你不想使用浮点数或显示块后，只剩下一种方法了，使用display: inline-block;.
在这里为您举例。:)
回答by adarshr
Wrap both the elements in a div, make the span a block and give a CSS style of float: leftto both the input and span tags.
将两个元素都包裹在一个 div 中，使 span 成为一个块，并为float: leftinput 和 span 标签提供一个 CSS 样式。
<div id="wrap">
<input name="firm" type="text" id="firm" size="20" />
<span id="helpico"></span>
</div>
And the CSS
和 CSS
#helpico {
background:url(images/question.png) left top;
width:16px;
height:16px;
display: block;
float: left;
}
#firm {
float: left;
}
回答by Mathieu van Loon
Can't you use an img tag for the image? That will display inline.
你不能为图像使用 img 标签吗？这将显示内联。
Generally the img will not display your icon at a pretty height (it will be too far up). Use either vertical-align for that (often text-bottom will work out) or use position:relative and top:3px or so on the img.
通常 img 不会以漂亮的高度显示您的图标（它会太高）。为此使用垂直对齐（通常 text-bottom 会起作用）或在 img 上使用 position:relative 和 top:3px 左右。
<input name="firm" type="text" id="firm" size="20" /><img id="helpico" src="images/question.png">
css
css
#helpico { vertical-align:text-bottom; }
