跨行在多个内联元素周围放置轮廓？

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

这对我来说是一个逃避的答案，但它有效™，至少对于我的目的来说，所以我一直使用它，直到出现更好的东西。

如果您愿意犯下相对较小的罪行，即在每个内部

span

的内容周围放置

div

并为

span

而不是

div

设置文本样式，您可以将每个

div

是

inline-block

，为每个人提供背景和边框样式

div

代替父

div

，将每个

margin

的左/右

div

设置为0，并通过

div

延伸

padding

的边界，使其看起来像一个连续背景矩形。如果您想要轮廓，可以使用

nth-item

选择器并相应地设置边框。

这是修改后的 HTML（也被压缩到一行，以消除

inline-block

元素之间的空格）：

<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>

这是修改后的 CSS：

.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 和大部分自动布局——超过了缺点。

Answer 3

您可以在单词周围添加按钮并更改 CSS，以便您可以编辑每个单词。如果您愿意，您还可以使边框/背景/特定侧面透明。