son - principales etiquetas de html

¿Por qué mis viñetas de elementos de lista se superponen a elementos flotantes

Question

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 con la imagen flotada.

Cambiar el margen de la lista o los elementos de la lista no ayuda. El margen se calcula desde la izquierda de la página, pero el flotador empuja los elementos de la lista hacia la derecha dentro del propio li . Así que el margen solo ayuda si lo hago más ancho que la imagen.

La flotación de 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 que aparezcan todas las listas en mi contenido solo para solucionar esto. Además, la izquierda flotante desordena el diseño cuando una imagen se desplaza a la derecha en lugar de a la izquierda de la lista.

La configuración de 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 alineadas con la viñeta, en lugar de alinearse con la línea anterior.

Obviamente, el problema se debe a que la bala se procesa 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án mal según la especificación. La pregunta es, ¿cómo puedo prevenirlo?

Answer 1

¿Por qué overflow: hidden obras overflow: hidden

La solución es tan fácil como:

ul {overflow: hidden;}

Un cuadro de bloque con overflow: distinto de lo 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 de mi sitio web , que están <li> disfrazados, están hechos así. Reduzca la ventana gráfica 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

Answer 2

Renuncia

Las listas junto a los elementos flotantes causan problemas. En mi opinión, la mejor manera de evitar este tipo de problemas flotantes es evitar las imágenes flotantes que se cruzan con el contenido. También te ayudará cuando tengas que apoyar el diseño responsivo.

Un diseño simple de tener imágenes centradas entre párrafos se verá muy atractivo y será mucho más fácil de admitir que tratar de volverse demasiado sofisticado. También está a un paso de una <figure> .

¡Pero realmente quiero imágenes flotantes!

Bien, si eres lo suficientemente persistente como para continuar por este camino, hay un par de técnicas que pueden usarse.

Lo más sencillo es hacer que la lista use overflow: hidden o overflow: scroll para que la lista esté esencialmente ajustada, lo que hace que el relleno vuelva a ser ú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 todo el propósito de usar float en 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 las listas!

Bien, si eres más loco y más persistente y debes continuar por este camino, existe otra técnica que puede usarse 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 nunca parece querer hacer), retire esas balas del <ul> y entréguelas a los <li> s. Las balas son peligrosas, y el <ul> simplemente 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 en el contenido complejo, por lo que no recomiendo agregarlo de forma predeterminada. Es mucho más fácil configurarlo como algo a lo que se puede optar en lugar de algo que se debe anular.

Answer 3

¿Qué tal esto?

ul{float:left; clear:right}

Answer 4

Añadiendo overflow: auto; Para tu ul funciona al menos para mí.

Actualizar

He actualizado mi jsfiddle para visualizar lo que está pasando. Al tener la ul junto a la imagen flotante, el flotador empujará el contenido de la ul , pero no el contenedor real. Al agregar el overflow: auto toda la caja de ul será empujada por el flotador en lugar de solo por el contenido.

Answer 5

Añadiendo 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 el overflow: hidden técnica overflow: hidden no lo hará. Sin embargo, también es necesario agregar padding-right: 1em al li para evitar que se desborden de su contenedor.

Answer 6

Añadir display:table; a ul :

ul{display:table;}

Answer 7

Aquí es donde la propiedad "mostrar" entra en su cuenta. Configure el CSS a continuación para que la lista funcione junto con el contenido flotado.

pantalla: tabla; Funciona junto con contenido flotante (llenando el vacío) pero sin ocultar el contenido detrás de él. Al igual que hace 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 para qué listas desea hacer esto. Por ejemplo, "ul.in-content" o más generalmente ".content ul"

Answer 8

Después de luchar con este interesante tema en varios proyectos e investigar por qué sucede, finalmente creo que encontré una solución funcional y "receptiva" .

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 */
}

Answer 9

Editado para actualizar basado en el comentario de OP

ok, luego simplemente divídelo 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>

intenta cambiar el ul li css a

ul {float: izquierda; fondo: azul; }

Answer 10

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 relleno / margen izquierdo que tendrían los elementos de su lista si el flotador no estuviera presente. Esto funciona muy bien en mi aplicación, incluso en el caso de que la parte inferior del flotador se produzca en medio de las listas: las balas vuelven al margen izquierdo (local) justo a la derecha.

Answer 11

Estoy usando esto para resolver este problema:

ul {
   display: table;
}

Answer 12

He encontrado una solución a este problema. Aplicando un ul { overflow: hidden; } ul { overflow: hidden; } a la ul asegura que la caja misma sea apartada por el flotador, en lugar del contenido de la caja.

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

Answer 13

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

Answer 14

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

overflow: hidden; 
padding-left: 2em; 

Answer 15

Lo arreglé con

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

Answer 16

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

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

El texto no está realmente sangrado pero la bala muestra.

Answer 17

Podría asignar position: relative; left: 10px; position: relative; left: 10px; a la li . (También puede querer darle un margin-right: 10px; contrario, podría ser demasiado ancho en el lado derecho).

O, si desea usar float para la ul , como lo sugieren otros, es probable que pueda evitar que el resto flote a la derecha de la ul mediante el uso de clear: left en el elemento que sigue a la ul.

Answer 18

También puede intentar flotar la ul a la izquierda y definir un width apropiado para que flote junto a la imagen.

Algo un poco como este jsfiddle ?

Answer 19

Trabajando dentro de un LMS sin acceso al jefe del documento, resultó más fácil ir con el margin-right: 20px como un estilo en línea para la imagen. Que le debo a este site .

Answer 20

o podrías hacer esto:

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

y luego quitar todo el estilo de la li

Answer 21

prueba esto:

li{
    margin-left:5px;
}

Si desea que se vayan a la izquierda, simplemente ingrese un valor - ## px.

Answer 22

width: auto; overflow: hidden;

Answer 23

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

margen izquierdo: auto hará que el elemento en sí esté alineado a la derecha. Establezca la altura y el ancho del elemento que desea, en mi es una imagen de fondo en una división interior