背景位置

Question

我试图在文本框中使用图像（##是图像）：

 ---------------------
|                  ## |
 ---------------------

我已经设法了解以下内容：

input.loading {
    background: url(/images/loader.gif) no-repeat right;
}

然而它就是这样出来的：

 ---------------------
|                   ##|
 ---------------------

我需要做的是在右侧添加一些填充，但是我对如何实现这一点感到迷茫。

Answer 1

你可以在你的css中使用margin-right:10px;

Answer 2

请改用它。它会解决你的问题。

background-position:10px 200px;

See this example并且玩耍：）

Answer 3

您可以将right更改为98%左右。 （right只是100%）

的简写

http://jsfiddle.net/gsUBL/

编辑： 我不知道为什么jsfiddle有显示它的问题（至少在chrome中）。单击运行显示它正常工作。

Answer 4

我会将no-repeat right;的定位更改为您想要的百分比，因为right只是一种更简单的方法来完全标记为右侧100%。 如果计算机具有不同的显示分辨率，按像素定位可能会导致不需要的水平滚动条甚至重叠。

Answer 5

有多种方法。如果输入框永远不会改变宽度，那么将所需的确切像素数量放在CSS中而不是“右”background: url(/images/loader.gif) no-repeat 200px;。我建议你正在做你正在做的事情background: url(/images/loader.gif) no-repeat right;，而是将padding-right: 20px;（或者你需要的话）加到输入框中。