html - 在 AEM 的文本 RTE 组件中调整 html 卡片元素的边距

Question

我已经使用 Text RTE 组件创建要放置在我的网页中的卡片。使用双头箭头(调整大小)工具，我设法调整大小并将三张卡片放在同一行中。

是否可以在html样式的内联标签中加入margin-left和margin-right来设置边距？在文本 RTE 编辑器对话框中退出代码编辑器后，它一直被删除。

如果您以前遇到过以下问题，我将不胜感激任何形式的帮助或知识共享。谢谢!

以下是在文本 RTE 组件中创建这些卡片的代码:

<div class="card" style="margin-left:0.5rem; margin-right: 0.5 rem; (Unable to set the margin property here, keeps getting removed)"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
<div class="card-body"><br>
<br>
<p>Document Description</p>
<br>
<br>
<p>Document Date: 01/01/1990<br>
</p>
</div>
</div>

Answer 1

你可以添加css代码:

<style>
.card {
  margin-left:0.5rem;
  margin-right: 0.5 rem;
}
</style>

或者您可以在卡片之间对空白卡片进行编码:

<style>
.blankCard {
  float: left;
  width: 1rem;
}
</style>

    <div class="card"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
    <div class="card-body"><br>
    <br>
    <p>Document Description</p>
    <br>
    <br>
    <p>Document Date: 01/01/1990<br>
    </p>
    </div>
    </div>

<div class="blankCard">
</div>

    <div class="card"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
    <div class="card-body"><br>
    <br>
    <p>Document Description</p>
    <br>
    <br>
    <p>Document Date: 01/01/1990<br>
    </p>
    </div>
    </div>