Descargo de responsabilidad
Las listas junto a los elementos flotantes causan problemas. En mi opinión, la mejor manera de prevenir este tipo de problemas flotantes es evitar las imágenes flotantes que se cruzan con el contenido. También ayudará cuando tenga que soportar un diseño receptivo.
Un diseño simple de tener imágenes centradas entre párrafos se verá muy atractivo y será mucho más fácil de soportar que tratar de ser demasiado elegante. También está a un paso de un<figure> .
¡Pero realmente quiero imágenes flotantes!
Ok, si estas loco lo suficientemente persistente para continuar por este camino, hay un par de técnicas que se pueden utilizar.
Lo más simple es hacer que la lista use overflow: hiddeno overflow: scrollpara que la lista esté esencialmente encogida, lo que lleva el relleno a donde es útil:
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>
Sin embargo, esta técnica tiene algunos problemas. Si la lista se alarga, en realidad no se ajusta a la imagen, lo que prácticamente anula el propósito de usarla floaten la imagen.
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>
¡Pero realmente quiero envolver listas!
De acuerdo, así que si eres aún más loco y persistente y debes continuar por este camino, hay otra técnica que se puede usar para envolver los elementos de la lista y mantener las viñetas.
En lugar de rellenar el <ul>y tratar de que se comporte bien con las balas (lo que parece que nunca quiere hacer), retire esas balas del <ul>y entreguelas al <li>s. Las balas son peligrosas, y el <ul>justo no es lo suficientemente responsable como para manejarlas adecuadamente.
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>
Este comportamiento de ajuste puede hacer cosas extrañas al contenido complejo, por lo que no recomiendo agregarlo de forma predeterminada. Es mucho más fácil configurarlo como algo que se puede optar en lugar de algo que se debe anular.
