根据最长行的背景和边框换行文本 - CSS答案

【问题标题】：background and border wrap text according to longest line - CSS根据最长行的背景和边框换行文本 - CSS
【发布时间】：2021-10-28 12:55:34
【问题描述】：

我正在尝试用 4 行边框包裹一个段落和 UL，并给它黑色背景。

我希望边框和背景根据最长行的长度包裹所有文本，我可以一次只做一行，但这意味着我想要的行之间没有背景颜色背景和边框将所有文本包裹在一起。

不知道怎么做。

这是我的 HTML 代码

<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>

这是我的 CSS 代码：

.commentBorder{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder1{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder2{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder3{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder4{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}

【问题讨论】：

标签： html css border background-color

【解决方案1】：

你的意思是这样的？：

.parent {
    width: fit-content;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    margin: 0 auto;
}

<div class="parent">
<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>
</div>

不幸的是，没有“干净”的方法来实现这一点，除非你添加一个包裹整体的父层。

请注意，我已将width: fit-content 添加到其中，以便它调整到最宽的元素。

【讨论】：

好的，这正是我想做的，但现在所有的文字都在左边，我怎么把它放回中间？我试过text-align: center;但它不起作用，它必须有保证金吗？
“所有文本”是什么意思？只有 p 文本还是 ul li 文本？
两者都在边框内居中，但整个边框在页面左侧
然后，只需将margin: 0 auto; 添加到父级即可。我已经更新了我的小提琴，以便您可以看到最终结果。 ;)
是的，这正是我想要做的，谢谢

【解决方案2】：

ul {
 background-color: rgba(0,0,0,0.5);
 border: 1px solid black;
}

我觉得你想要整个ul的背景色，可以去掉每个li的背景色

【讨论】：

它有效，但仅适用于 ul，我也想要那里的段落
那么你需要把
和