Html Css边框围绕li，但不封装子列表

我想用边框包围多行li文本

我也想： 1使边框仅环绕每个元素，就像在根元素上一样 [已解决！]2使边框在文本停止的位置停止，而不是向一侧延伸 3在每个元素的边框之间添加一些间距

说明：

HTML:

小提琴：

---

到目前为止，我已经尝试使用不同的显示类型、填充、用div标记封装文本等，但没有多大成功。

我修复了您的3个问题，如下所示：

仅用{text}换行文本，而不是任何子列表。node类应用边框，因为它只包装文本而不包装子列表，所以边框只围绕节点。为了让它看起来好看，我加了一点填充物。 新的换行将使用全宽度，因此显示：内联块仅使用必要的空间应用于节点类。 node类有一个边距底部以在下面获得一些空间。为了说明这一点，必须改变前后元素的大小。 我从列表中排除了根，因为否则会有一个用于根的子列表，其中包含所有其他的子列表，这对我来说没有多大意义

前后仍然有一些重叠，也许这可以通过更精细的调整大小来改进，但是在给定的示例中一切看起来都很好

* { 边际：0px； 填充：0px； } 身体{ 利润率：50像素； 字体大小：16px； } 保险商实验室{ 保证金：0px 0px 0px 20px； 列表样式：无； 线高：2； } 李{ 位置：相对位置； } 李：之后{ 位置：绝对位置； 左：-10px； 底部：-7px； 内容：； 显示：块； 左边框：1px纯红； 身高：100%； } 李：以前{ 位置：绝对位置； 左：-10px； 顶部：-10px； 内容：； 显示：块； 左边框：1px纯红； 高度：32px； 边框底部：1px纯红； 宽度：10px； } 李：最后一个孩子：：之后{ 显示：无； } .节点{ 显示：内联块； 边框：1px纯红； 填充物：5px； 边缘底部：10px； } 根 洛雷姆·伊普苏姆达比乌斯·奈克汀奇杜特·莫里斯 告别精英。 毛里斯酒庄。 前庭 等分 达皮布斯 毛里斯·尤里索斯的阿利夸。 前庭拍卖人dapibus neque。

---

2可以用li{float:left；clear:left；}求解，3可以用margin:some间距求解；但我不知道你说1是什么意思。谢谢。我制作这张图片是为了说明第1点和第3点。至于边距：这打破了将节点（类似于目录的线）连接到左边的层次结构树。您能否详细说明您是如何解决问题1的？我想更好地理解css:@Nattfrosten我更新了我的答案，直接解决了你的三个问题

<ul>
  <li class="root">
    Root
  </li>
  <li>
              Lorem ipsum<br>dapibus neque<br>Tincidunt mauris
        <ul>
          <li>Adipiscing elit.</li>
          <li>Tincidunt mauris eu risus.</li>
          <li>Vestibulum </li>
        </ul>
  </li>
  <li>Aliquam</li>
  <li>
    Dapibus
    <ul>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
  </li>
</ul>

$maincolor: #F76464;

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;

  li {
    font-size: 16px;
    position: relative;
    border: 1px solid $maincolor;

    &::before {
      position: absolute;
      left: -15px;
      top: 0px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 1em;
      border-bottom: 1px solid $maincolor;
      width: 10px;
    }

    &::after {
      position: absolute;
      left: -15px;
      bottom: -7px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 100%;
    }

    &.root {
      margin: 0px 0px 0px -20px;

      &::before {
        display: none;
      }

      &::after {
        display: none;
      }
    }

    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}