Question

在第二个框中，注意箭头在同一个地方的方式。如何让它与div一起流动？

在scroll right center属性中使用background有效，但我想保留一些填充权。

我也试图避免使用2个div或标签。这可以通过。box div吗？

Answer 1

.right-align-background {
    background-position: center right;
}

http://jsfiddle.net/Zx836/1/

Answer 2

如果您希望背景与您在元素上设置的填充对齐，也可以使用background-origin: content-box;。

这样的事情：

input.error {
 background: no-repeat;
 background-image: url('../images/field-error.png');
 background-position: right center;
 background-origin: content-box;
 padding-right: 5px;
}

Answer 3

如何使用:after代替添加图片？

.box {
    background: #a6cf83;
    float:left;
    color:#333;
    font-weight:bold;
    padding:8px;
}

.box:after {
    content: url(http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/new-go-next.png);
}

Answer 4

如果您需要在右侧填充，我认为您可能需要使用百分比：

background-position:95% 50%;

如果您的元素具有相似的宽度，

会很好。

Answer 5

Calc() has 95% browser support in the US now（2017年9月），为这个问题提供了一个优雅的解决方案。

background-position: calc(100% - 24px) center;

将背景图像对齐

5 个答案: