Списки рядом с плавающими элементами: Как получить элементы списка в нужном месте? - PullRequest
Новая
       13

Списки рядом с плавающими элементами: Как получить элементы списка в нужном месте?

3 голосов
/ 07 марта 2012

Эта скрипка показывает основную проблему: http://jsfiddle.net/boldewyn/Qvfgv/

Существует элемент с плавающей точкой и рядом с ним список в основном потоке.Элементы списка распространяются на пространство плавающего элемента.

Обходной путь должен использовать overflow: hidden на <ul>.Но тогда список больше не «обтекает» div, а остается все время справа, что нежелательно для всего пустого пространства под плавающим элементом.

Что я ищу:

  • Список должен плавать вокруг плавающего блока, а элементы списка должны оставаться вне области плавающего блока.С другой стороны, это нормально, если отдельные элементы <li> нажимаются вправо (например, с помощью overflow: hidden).

  • Чистое решение CSS без фоновых изображений или JavaScript.Это для страницы предварительного просмотра печати, которая также должна быть адаптирована для людей без JavaScript и вплоть до IE7.

  • Список маркеров должен быть расширен слева, как браузердефолт.Это означает, что элементы списка рядом с плавающим элементом должны получить дополнительное пространство для размещения пули в нем.

Что не работает:

  • с использованием фоновых изображений, я мог бы задать отступы для отдельных элементов списка и установить их.Но это недостаточно надежно, потому что цель страницы должна быть напечатана.

  • Я не знаю точную ширину или высоту плавающего элемента.Если бы я это сделал, я мог бы решить проблему с li { margin-left: "floated-element's width" + 20px; }.

  • Я немного поэкспериментировал с комбо text-indent, list-style-position и тому подобным, но не смогПридумайте полезное решение.

Вполне может быть, что для этого не существует решения только для CSS.Этот вопрос буквально является моим последним средством, прежде чем сказать клиенту, что это невозможно.

Ответы [ 4 ]

2 голосов
/ 07 марта 2012

Это это что вы ищете?

Я только что увеличил margin-right блока с 10px до 30px.

Редактировать

Я думаю, что у меня есть эффект, который вы хотите, но он может быть слишком хакерским для ваших нужд - jsFiddle

0 голосов
/ 09 декабря 2015

Я согласен с TomWardrop в том, что лучшее решение, которое я нашел для обеспечения согласованности отступов вложенного списка, когда рядом с плавающим элементом или нет, - сбросить заполнение и использовать относительное позиционирование с левой настройкой. 

ul {
  position: relative;
  padding-left:0;
  margin-left:0;
  left: 1em;
}

См. Скрипку.

Обновление.

Если вы хотите, чтобы вставка была только во вложенных списках, и чтобы первый уровень оставался внутри абзаца. Установите влево 0 для объявления ul css, а затем: 

ul ul {
  left:1em;
}

см. Скрипку

0 голосов
/ 23 февраля 2014

position: relative; - лучшее решение, которое я нашел, просто обязательно добавьте отступ или поле справа, чтобы компенсировать смещение.Это работает с list-style-position, установленным на inside или outside.Вам просто нужно настроить смещение соответственно. 

ul {
  position: relative;
  left: 3em;
  margin-right: 3em;
}
0 голосов
/ 07 марта 2012

пули в списке часто оказываются левее, чем должны.Ответ прост: добавьте немного левого поля к вашим <li> или левый отступ к вашему <ul>.Это сместит все вправо.

Я обычно вижу такое поведение на сайтах, которые используют сброс CSS, потому что ul,li {margin:0;padding:0} даст поведение, которое вы видите.Фактически, ваша скрипка делает это: 

ul {
  margin: 0;
  padding: 0 0 0 20px;
}

li {
  margin: 0;
  padding: 0;
}

Так что, да, вы фактически выравниваете текст по левому краю, но не пулю, которая проходит за край (я полагаю, это какая-то причуда CSS).В вашем случае у вас есть отступ в 20 пикселей на ul, но этого недостаточно, попробуйте поставить его на li или использовать поля.

...