Html 在 CSS 中将图像向右移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12795077/
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
Moving the image to right in CSS
提问by sriram
I'm very new to web development, I have a code like this :
我对网络开发很陌生，我有一个这样的代码：
<style type="text/css">
span {
background:red;
background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
}
</style>
<span>
Contents.
</span>
I get the output but the image is been placed over Contentstext. I tried with :
我得到输出，但图像被放置在Contents文本上。我试过：
background-position: 25px;
But that is making the image to disappear! But what I was looking for is :
但这会使图像消失！但我一直在寻找的是：
Contents . . . . . . . . . . . . . my_image
Contents . . . . . . . . . . . . . my_image
(note that .in above is space)
（注意.上面是空格）
Where I'm making the mistake?
我在哪里犯了错误？
Thanks in advance.
提前致谢。
采纳答案by L0j1k
Remember that <span>is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px;to move your text to the right. Alternatively, you can move the new <div>to the right using left: 25px;. Remember that leftwill tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:
请记住，这<span>是一个内联元素，它不是用于您希望以块方式显示的项目的正确标记。为此，您应该使用<div>. 话虽如此，您可以使用text-indent: 25px;将文本向右移动。或者，您可以使用 将新的移动<div>到右侧left: 25px;。请记住，这left会告诉它您希望将它放置在离左边框多远的地方。然后，您可以将文本放在另一个中<div>：
<style type="text/css">
div {
display:inline-block;
}
div.image {
background:red;
background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
left:25px;
}
</style>
<div class="box">
Contents.
<div class="image"></div>
</div>
回答by Cirou
If you don't need that your image is a background-imageyou can apply this:
如果你不需要你的图像是一个background-image你可以应用这个：
CSS:
CSS：
<style>
div#box{
width: 100%;
}
img#image {
float: right;
}
</style>
HTML :
HTML :
<div id="box">
<span id="content">
Contents.
</span>
<img src="bkg.jpg" alt="Image not available">
</div>
回答by Soarabh
I am also agree with @L0j1k that span is a inline level element. Why you are placing some content inside a span and then applying a background image in that span. Anyways please check the jsfiddle link
我也同意 @L0j1k 的观点，即 span 是一个内联级别元素。为什么要在跨度内放置一些内容，然后在该跨度中应用背景图像。无论如何请检查jsfiddle链接
DEMO
演示
回答by suiz
Inline:-
排队：-
<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>
