Tengo una página (XHTML Strict) donde floto una imagen junto con párrafos regulares de texto. Todo va bien, excepto cuando se usa una lista en lugar de párrafos. Las viñetas de la lista se superponen a la imagen flotante.

Cambiar el margen de la lista o los elementos de la lista no ayuda. El margen se calcula a partir de la izquierda de la página, pero el flotador empuja los elementos de la lista a la derecha en el interior del limismo. Entonces el margen solo ayuda si lo hago más ancho que la imagen.

Flotar la lista al lado de la imagen también funciona, pero no sé cuándo la lista está al lado de un flotador. No quiero flotar todas las listas en mi contenido solo para arreglar esto. Además, la izquierda flotante desordena el diseño cuando una imagen flota a la derecha en lugar de a la izquierda de la lista.

La configuración li { list-style-position: inside }mueve las viñetas junto con el contenido, pero también hace que las líneas que se ajustan comiencen a alinearse con la viñeta, en lugar de alinearse con la línea de arriba.

El problema obviamente es causado por la viñeta que se representa fuera de la caja, el flotador empuja el contenido de la caja hacia la derecha (no la caja en sí). Así es como IE y FF manejan la situación, y que yo sepa, no está mal según las especificaciones. La pregunta es, ¿cómo puedo prevenirlo?

He encontrado una solución a este problema. La aplicación de una ul { overflow: hidden; }a ulasegura que el flotador empuje a un lado la caja, en lugar del contenido de la caja.

Solo IE6 necesita un ul { zoom: 1; }en nuestros comentarios condicionales para asegurarse de que ultiene diseño.

Agregar una mejora a la solución de Glen E. Ivey :

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

http://jsfiddle.net/mblase75/TJELt/

Prefiero esta técnica, ya que funciona cuando la lista necesita fluir alrededor de la imagen flotante, mientras que la overflow: hiddentécnica no lo hará. Sin embargo, también es necesario añadir padding-right: 1ema la lide evitar que desborde su contenedor.

Aquí es donde entra en juego la propiedad "display". Configure el CSS a continuación para que la lista funcione junto con el contenido flotante.

pantalla: mesa; funciona junto al contenido flotante (llenando el vacío) pero sin ocultar el contenido detrás de él. Al igual que una mesa :-)

.img {
  float: left;
}

.table {
  display: table;
}

<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

EDITAR: Recuerde agregar una clase para aislar las listas para las que desea hacer esto. Por ejemplo, "ul.in-content" o más generalmente ".content ul"

Pruebe list-style-position: inside para cambiar el diseño de las viñetas.

En http://archivist.incutio.com/viewlist/css-discuss/106382 encontré una sugerencia que funcionó para mí: diseñar los elementos 'li' con:

position: relative;
left: 1em;

Donde reemplaza "1em" con el ancho del margen / margen izquierdo que tendrían los elementos de la lista si el flotador no estuviera presente. Esto funciona muy bien en mi aplicación, incluso manejando el caso donde el fondo del flotador ocurre en el medio de las listas: las balas vuelven al margen izquierdo (local) justo a la derecha.

Por que overflow: hiddenfunciona

La solución es tan fácil como:

ul {overflow: hidden;}

Un cuadro de bloque con overflow:otro que visible establece un nuevo contexto de formato de bloque para su contenido. Recomendación del W3C: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Ejemplo

Los botones en mi sitio web , que están <li>disfrazados, están hechos de esta manera. Reduzca la ventana gráfica (ventana) de su navegador para ver la sangría en acción .

Respuestas relacionadas

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Artículo con ejemplos

• Desbordamiento: un beneficio secreto

Al agregar overflow: auto;a sus ulobras al menos para mí.

Actualizar

He actualizado mi jsfiddle para visualizar lo que está sucediendo. Al tener el ullado al lado del flotante img, el contenido del ulmismo será empujado por el flotador, pero no el contenedor real. Al agregar overflow: autoel ul-box completo, el flotador lo empujará en lugar de solo el contenido.

Podrías asignar position: relative; left: 10px;a la li. (También es posible que desee darle un margin-right: 10px;, de lo contrario, podría ensancharse demasiado en el lado derecho).

O, si desea utilizarlo floatpara ul, como lo sugieren otros, probablemente pueda evitar que el resto flote a la derecha del ul utilizando clear: leftel elemento que sigue al ul.

Estoy usando esto para resolver este problema:

ul {
   display: table;
}

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.

Pruebe lo siguiente en su etiqueta UL. Esto debería ocuparse de las viñetas que se superponen a su imagen y no tiene que estropear su alineación izquierda causada por list-position: inside.

overflow: hidden; 
padding-left: 2em; 

Luché con esto yo mismo. Lo mejor que he logrado es lo siguiente:

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

El texto no está realmente sangrado, pero se muestra la viñeta.

Editado para actualizar según el comentario de OP

ok, entonces solo divídalo en 2 divs anidados juntos

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

intente cambiar el ul li css a

ul {float: izquierda; fondo: azul; }

Después de luchar con este interesante tema en varios proyectos e investigar por qué sucede, finalmente creo que encontré ambos: un trabajo y 'receptivo' solución .

Aquí está el truco de magia, ejemplo en vivo: http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}

Al trabajar dentro de un LMS sin acceso al jefe de documento, me resultó más fácil usarlo margin-right: 20pxcomo un estilo en línea para la imagen. Lo que le debo a este sitio .

prueba esto:

li{
    margin-left:5px;
}

Si quieres que se vayan a la izquierda, solo pon un valor - ## px.

o podrías hacer esto:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

y luego eliminar todo el estilo del li

¿Qué tal esto?

ul{float:left; clear:right}

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto hará que el elemento esté alineado a la derecha. Establezca la altura y el ancho del elemento que desee: en mi es una imagen de fondo en un div dentro

También puede intentar flotar ula la izquierda y definir un apropiadowidth para él, de modo que flote al lado de la imagen.

Algo un poco como este jsfiddle ?

Lo arreglé con

div.class-name ul {
  clear: both;
}

width: auto; overflow: hidden;

Añadir display:table; a ul:

ul{display:table;}