背景图像中的填充与右侧对齐

Question

我有这个 html：

 <div class="warning">
    <span>text text text</span>
</div>

这个CSS：

 .warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center;
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

这是结果：

问题是右对齐的背景图像和边框之间没有填充。如何在图像和边框之间添加填充？ （我不能向 div 添加元素！）

原文由 Naor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

无需对 html 进行任何更改，只需对 css 进行少量更改即可完成此操作。试试这个 css - 我只是更改了警告图标的位置。

 background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;

<div class="warning">
    <span>text text text</span>
</div>

.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

原文由 w3uiguru 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要使其与右侧的 18px 填充一致，您可以使用 calc。

 background-position-x: calc(100% - 18px);

原文由 qwert 发布，翻译遵循 CC BY-SA 4.0 许可协议