如何使用CSS实现背景边框根据最长行宽度整体包裹文本与列表

解决方案 #

你当前的问题是将样式拆分添加到了每个独立的行内元素上，导致样式无法整体包裹所有内容，按以下方式修改即可实现需求：

修改后的HTML代码 #

给需要整体添加样式的段落和无序列表套一个公共的外层父容器，同时可以删除原有各个span上重复的边框背景类：

<div class="content-wrapper">
  <p>
    some text about the next lines:
  </p>
  <ul>
    <li>first line text.</li>
    <li>second line text.</li>
    <li>third line text.</li>
    <li>fourth line text.</li>
  </ul>
</div>

修改后的CSS代码 #

将背景、边框样式统一添加到外层父容器上，设置宽度为fit-content即可让容器宽度自动适配内部最长内容的宽度：

.content-wrapper {
  /* 宽度自适应内部最长内容 */
  width: fit-content;
  /* 统一背景和边框 */
  background-color: rgba(0,0,0,0.5);
  border: 1px solid black;
  /* 增加内边距避免内容贴边，可根据需求调整数值 */
  padding: 10px 15px;
}
/* 可选：调整ul的默认外边距，避免和段落之间空隙过大 */
.content-wrapper ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

内容的提问来源于stack exchange，提问作者Roy Shiff