已阻止：仅当按钮具有外部图标时，如何为按钮提供额外的填充？

Posted 2023-03-05

【中文标题】已阻止：仅当按钮具有外部图标时，如何为按钮提供额外的填充？

【英文标题】：Blocked: How to give additional padding to a button , ONLY if it has an external icon?

【发布时间】：2021-12-06 02:48:00

【问题描述】：

如果按钮中有一个外部图标，我正在尝试为按钮提供一些填充。如果有外部图标，我想给按钮padding-right: 30pxexample。但是，如果没有外部图标，则按钮不应获得 30 像素的填充。目前，即使没有外部图标，我仍然会出现 30px padding-right 的问题。 Example

有没有办法根据外部图标是否存在来切换 CSS？

这是 html 和 CSS：

.btn 
  border-radius: 3px;
  border: none;
  height: 45px;
  font-weight: bold;
  font-size: 18px;
  background: #FFFFF;
  color: #515151;
  margin-top: 19px;
  padding-top: 12px;
  border: solid #FFFFFF 1px;

<a href="......." title="Hello World" class="btn btn-default" role="button" target="_blank">
    Button Title
    <svg class="svg-inline--fa fa-external-link fa-w-16 pull-right" title="external link icon" aria-labelledby="svg-inline--fa-title-u1BaVqD2mZ2F" data-prefix="far" data-icon="external-link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <title id="svg-inline--fa-title-u1BaVqD2mZ2F">external link icon</title>
    </svg>
    <!-- <i class="far fa-external-link pull-right" title="external link icon"></i> -->
</a>

【问题讨论】：

请注意：background: #FFFFF; 应该是 background: #FFFFFF;。 white 的十六进制值具有 3 或 6、f 的在里面。

你基本上想要:has()，但这还没有真正的浏览器支持。

【参考方案1】：

你需要使用 js 来做这个，你不能用纯 css 来做 你可以通过 .style 属性来做到这一点，每当你希望该按钮的 padding-right 为 30 px 时，你应该添加一些 js，例如在这种情况下，我想在点击事件期间添加这个填充：

const btn=document.queryselector(".btn");
btn.addeventlistiner("click",()=>
btn.style.padding="30px"
)

您当然可以在另一个活动中添加它，这只是一个示例。

【讨论】：

不确定为什么要添加点击事件？ OP 没有在任何地方声明必须使用点击事件添加填充。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

这可以通过使用:has() 伪选择器来实现。

.btn:has(svg) 
    padding-right: 30px;

但是:has()目前不被浏览器支持，所以我建议现在就使用它。

但这里有一个解决方法...

也许您可以为图标本身添加填充或边缘。

.btn > svg  margin-right: 30px