在换行符周围围绕多个内联元素绘制轮廓？

Question

我想在一堆内联元素周围添加彩色轮廓。有没有简单的方法可以在文本流程中使其看起来正确？

这是HTML：

<span>Text Before</span>
<div class="border">
    <div>This</div>
    <div>is</div>
    <div>not</div>
    <div>a</div>
    <div>public</div>
    <div>service</div>
    <div>announcement.</div>
</div>
<span>Text After</span>

这里是CSS：

.border {
    display: inline;
    background-color: pink;
    word-spacing: 10px;
    padding: 2px 0 2px 0;
    border: solid;
}
.border > div {
    display: inline;
    font-size: 30px;
    background-color: lavender;
}

.border display: inline的屏幕截图：

.border display: inline-block的屏幕截图：

我希望它看起来像这样（通过手动线高，填充和相对定位的混合完成......呃！）：

基本上，inline-block元素可以正常运行，但它们不会像inline元素那样在行间分开。但是inline元素会折叠它们的高度，必须手动调整。真的没办法解决这个问题吗？

Answer 1

尝试在容器div上添加行高。

.border {
    display: inline;
    background-color: pink;
    word-spacing: 10px;
    padding: 2px 0 2px 0;
    border: solid;
    font-size: 30px;
}
.border > div {
    display: inline-block;
    margin-bottom: 15px;
    background-color: lavender;
}

Answer 2

这是我个人的答案，但It Works™，至少在我的目的，所以我会使用它，直到出现更好的东西。

如果您愿意犯下相对轻微的罪行，即在每个内部span的内容周围放置div并为span而不是div设置文字样式div，您可以将每个inline-block设为div，为每个人div而不是父margin提供背景和边框样式，设置每个div的左/右div为0，并通过padding扩展nth-item的边框，使其看起来像一个连续的背景矩阵。如果您想要大纲，可以使用inline-block选择器并相应地设置边框。

这是修改后的HTML（也压缩到一行，以摆脱<span>Text Before</span> <div class="border"> <div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div> </div> <span>Text After</span> 元素之间的空格）：

.border {
    display: inline;
    word-spacing: 0;
}
.border > div {
    display: inline-block;
    vertical-align: middle;
    background-color: pink;
    padding: 5px;
    margin: 2px 0 2px 0;
    border-top-style: solid;
    border-bottom-style: solid;
}
.border > div:nth-child(1) {
    border-left-style: solid;
}
.border > div:last-child {
    border-right-style: solid;
}
.border > div > span {
    background-color: lavender;
    font-size: 30px;
    vertical-align: middle;
}

以下是经过修改的CSS：

{{1}}

这就是它的样子：

如果你想要一些比带有边框的背景颜色更复杂的东西，这种技术就会崩溃，但就我的目的而言，好处 - 那些更简单的CSS和大多数自动布局 - 都超过了缺点。