html - 如何设置ul/ol样式以便能够灵活地包装 float 内容？

我觉得应该是一组相对简单的约束，我似乎无法找到解决方案。我正在尝试构建一组可以灵活地一起使用的WYSIWYG组件样式，并且不能将元素符号/编号列表组合在一起以可预测的方式环绕浮点数字，而又不会丢失缩进或引起重叠的内容:

限制:

每层嵌套

都应使缩进列表缩进更多

float 内容可以 float 到右侧或左侧

列表可以任意长，并且应该可预测地围绕 float 内容

这是设置了“float:left”的内容右侧列表的默认样式。元素符号与 float 内容重叠，并且压痕丢失。

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

在overflow元素上将值设置为overflow: hidden(即<ul>)可修复元素符号格式+缩进，但不允许包装内容:

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

ul {
  overflow: hidden;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

我能想到的唯一其他解决方案是使用嵌套的transform和偏移量padding使其正常工作:

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

ul {
  padding: 0;
}

li {
  list-style-position: inside;
  transform: translateX(30px);
  padding-right: 30px;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

但是，当 float 内容向右 float 时，此解决方案不起作用:

.pull-right {
  background: #3333ff;
  color: white;
  float: right;
  width: 50%;
  height: 80px;
}

ul {
  padding: 0;
}

li {
  list-style-position: inside;
  transform: translateX(30px);
  padding-right: 30px;
}

<div class="pull-right">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item with long enough text that it overlaps the floating content</li>
      <li>Nested Item</li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

我在互联网上搜寻了一个灵活的解决方案，却找不到任何地方。这套(相当合理的)限制仅仅是无法做的事情吗？还是我错过了什么？

最佳答案

我认为您与transform解决方案关系密切，但您可以将其更改为使用text-indent并针对每个级别调整缩进。

.pull-left {
  background: #3333ff;
  color: white;
  float: left;
  width: 50%;
  height: 80px;
}

ul {
  padding: 0;
}

li {
  list-style-position: inside;
  text-indent: 10px;
  padding-right: 30px;
}

ul ul>li {
  text-indent: 20px;
}

ul ul ul>li {
  text-indent: 30px;
}

ul ul ul ul>li {
  text-indent: 40px;
}

<div class="pull-left">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item
        <ul>
          <li>Nested Item</li>
          <li>Nested Item</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

右 float 也可以:

.pull-right {
  background: #3333ff;
  color: white;
  float: right;
  width: 50%;
  height: 80px;
}

ul {
  padding: 0;
}

li {
  list-style-position: inside;
  text-indent: 10px;
  padding-right: 30px;
}

ul ul>li {
  text-indent: 20px;
}

ul ul ul>li {
  text-indent: 30px;
}

ul ul ul ul>li {
  text-indent: 40px;
}

<div class="pull-right">Floating content</div>

<ul>
  <li>First Item
    <ul>
      <li>Nested Item long long long long long long long long long text</li>
      <li>Nested Item
        <ul>
          <li>Nested Item with long long long long long long long long long text</li>
          <li>Nested Item</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Second Item</li>
  <li>Third Item
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>