отказ
Списки рядом с плавающими элементами вызывают проблемы. На мой взгляд, лучший способ предотвратить такие виды плавающих проблем - это избегать плавающих изображений, которые пересекаются с контентом. Это также поможет, когда вам нужно поддерживать адаптивный дизайн.
Простой дизайн, состоящий из центрированных изображений между абзацами, будет выглядеть очень привлекательно и его будет гораздо проще поддерживать, чем пытаться стать слишком причудливым. Это также один шаг от <figure>.
Но я действительно хочу плавающие изображения!
Итак, если вы достаточно сумасшедший , чтобы продолжать идти по этому пути, есть пара методов, которые можно использовать.
Самое простое - сделать использование списка overflow: hiddenили сделать overflow: scrollтак, чтобы список был по сути сжатым, что возвращает отступ туда, где он полезен:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Эта техника имеет несколько проблем, хотя. Если список становится длинным, он фактически не оборачивается вокруг изображения, что в значительной степени сводит на нет всю цель использования floatизображения.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Но я действительно хочу упаковывать списки!
Итак, если вы еще более сумасшедший, более настойчивый и вам обязательно нужно идти по этому пути, есть еще один метод, который можно использовать для обертывания элементов списка и поддержания маркеров.
Вместо того, чтобы дополнять <ul>и пытаться заставить его вести себя хорошо с пулями (что, похоже, никогда не требуется), уберите эти пули из <ul>и передайте их <li>s. Пули опасны, и <ul>просто недостаточно ответственны, чтобы обращаться с ними должным образом.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Такое поведение может вызывать странные вещи в сложном контенте, поэтому я не рекомендую добавлять его по умолчанию. Гораздо проще настроить его как нечто, на что можно переключиться, а не как то, что нужно переопределить.
