时间戳

首页 > 解决方案 > 我如何设置 ul/ols 的样式以便能够灵活地环绕浮动内容？

html - 我如何设置 ul/ols 的样式以便能够灵活地环绕浮动内容？

问题描述

我觉得应该是一组相对简单的约束，我似乎无法找到解决方案。我正在尝试构建一组所见即所得的组件样式，它们可以灵活地协同工作，并且无法组合项目符号/编号列表来以可预测的方式环绕浮动数字，而不会丢失缩进或导致内容重叠：

限制：

这是设置了“float:left”的内容右侧列表的默认样式。项目符号与浮动内容重叠，缩进丢失。 

.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(ie 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>

我能想到的唯一其他解决方案是使用 nested transforms 和 offsetpadding让它工作：

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

但是，当浮动内容向右浮动时，此解决方案不起作用：

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

我已经在互联网上搜索了一个灵活的解决方案，但在任何地方都找不到任何东西。这套（相当合理的）限制不是可以做到的吗？还是我错过了什么？

标签： htmlcsscss-floathtml-listsrich-text-editor

解决方案

在盒子上使用margin-left和的组合。text-indentfloat: right

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

ul {
  padding: 0;
}

li {
  list-style-position: inside;
  margin-left:10px;
  padding-right: 30px;
}

ul ul>li {
  margin-left: 35px;
  text-indent: -15px;
}

ul ul ul>li {
  margin-left: 45px;
  text-indent: -15px;
}

ul ul ul ul>li {
  margin-left: 55px;
  text-indent: -15px;
}
<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>

不幸的是，它不适用于左侧浮动的框。在最坏的情况下，您可以clear: left在<ul>. 它不会包裹，但不会发生任何奇怪的事情。

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

ul {
  padding: 0;
  clear: left;
}

li {
  list-style-position: inside;
  margin-left:10px;
  padding-right: 30px;
}

ul ul>li {
  margin-left: 35px;
  text-indent: -15px;
}

ul ul ul>li {
  margin-left: 45px;
  text-indent: -15px;
}

ul ul ul ul>li {
  margin-left: 55px;
  text-indent: -15px;
}
<div class="pull-left">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>

推荐阅读