有没有办法将段落的背景设置为一直到达段落中间，而且还可以在段落结束时结束

Question

我正在尝试创建这样的东西：

一组段落后跟一个箭头（mui 图标），然后是一组新文本。但要让它们的背景颜色到达容器的边缘。理想情况下也没有任何线间隙，但不要对此太大惊小怪。

这是我能得到的最接近的结果，这还不错，但我无法在行首和行尾的文本两侧添加填充。如果至少我可以添加填充那么这可能就足够了。

尝试了不同的跨度和段落，但没有什么值得注意的......没有任何效果。我怎样才能做到这一点？

谢谢

Answer 1

没有您的代码，很难准确地帮助您，但是：

.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f9f9f9;  /* Same color as the text background */
    margin: 0 5px; /* Space around the arrow */
}

然后使用 Html

<div class="container">
    <p class="text">This is some text</p>
    <div class="arrow"></div>
    <p class="text">This is the next text</p>
</div>

所以

Margin

是您要包含的属性。当然，你知道，边距仅适用于块级元素。因此，如果您的箭头是

span

那么您需要包括：

display: inline-block