Как мне стилизовать ul / ols, чтобы иметь возможность гибко переносить плавающий контент?

Question

У меня есть то, что, по моему мнению, должно быть относительно простым набором ограничений, для которых я не могу найти решение.Я пытаюсь создать набор стилей WYSIWYG-компонентов, которые будут гибко работать вместе и не могут получить комбинацию маркированных / нумерованных списков для предсказуемого переноса вокруг всплывающих фигур без потери отступов или создания наложения контента:

Ограничения:

• Вложенные списки должны иметь больший отступ с каждым уровнем вложенности
• Плавающее содержимое может перемещаться либо вправо, либо влево
• Списки могут быть произвольнымиlong и должен предсказуемо обернуться вокруг плавающего содержимого

Это стиль по умолчанию для списка справа от содержимого, для которого установлено значение «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 (т.е. 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 s и смещение 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>

Однако это решение не работает, когда плавающий контент перемещается вправо:

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

Я искал в интернете гибкое решение этой проблемы и нигде не могу ничего найти.Разве этот набор (довольно разумных) ограничений не является чем-то, что можно сделать?Или я что-то упустил?

Answer 1

Использование комбинации margin-left и отрицательного text-indent работает на поле float: 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>

Answer 2

Я думаю, что вы были близки к решению 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>

Это также будет хорошо с правым плавающим:

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