prevenir el bloqueo de línea envolver pero permitir contenido a envolver

Hasta ahora tengo este diseño:prevenir el bloqueo de línea envolver pero permitir contenido a envolver

<ul style="white-space:nowrap;"> 
    <li style="width:200px; display:inline-block;"></li> 
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li> 
</ul>

he logrado detener la ul de envoltura que es un comienzo. Sin embargo, el contenido en el segundo li continúa fuera de la pantalla. Superposición de sus elementos primarios, etc.

Necesito el 2º li para tomar la holgura y ser dinámico en anchura a diferencia del primer li. Y necesito el texto para envolver dentro del 2º li.

Gracias por cualquier ayuda.

Fuente

2011-10-28 HGPB

¿Es sólo tiene que desactivar envolver por primera elemento de la lista? Podría simplemente establecer 'white-space: nowrap;' para él, y no el contenedor de la lista en su totalidad. – unclenorton

Hay una imagen en el primer elemento de la lista y el texto en el segundo. Así que solo estoy preocupado por el segundo ajuste de la lista de elementos. – HGPB

li {display: table;} es su amigo.

p.s. ¡No olvides eliminar los estilos en línea!

Fuente

2012-11-29 14:05:40 Timidfriendly

Pruebe white-space: normal en los elementos li.

white-space se hereda por defecto por lo que recibieron nowrap del ul.

estoy empezando a pensar que está utilizando un ul con fines de diseño, que div podrían ser más adecuados para:

<div class="Item"> 
<div class="ImageContainer"><img src="" alt="/></div> 
<div class="TextContainer">Text text text text text</div> 
</div> 

.Item { 
width: 200px; 
overflow: auto; 
} 

.ImageContainer { 
float: left; 
width: 40%; 
} 

.TextContainer { 
float: left; 
width: 60%; 
}

Fuente

2011-10-28 12:53:56 Bazzz

Gracias - parece que esto solo funciona para mí, si agrego un ancho fijo también. Realmente no quiero agregar un ancho al segundo li. – HGPB

¿Puedes especificar lo que quieres, entonces? Porque estoy empezando a pensar que podría estar utilizando el 'ul' para fines de diseño en lugar de hacer una lista. Y si es así, quizás algunos 'div's flotantes podrían hacer el trabajo mejor. – Bazzz

Primero, li tiene una imagen; la segunda, li, debe contener texto que se puede doblar. El segundo li puede crecer y reducirse en tamaño dependiendo de la resolución de la pantalla. – HGPB

Parece que en realidad podría querer utilizar una tabla.

De lo contrario, si conoce el ancho de la imagen, gírela hacia la izquierda y déle al siguiente elemento un margen izquierdo mayor o igual que el ancho de la imagen.

Por ejemplo:

article > img { 
 
    float: left; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
article > div { 
 
    margin-left: 90px; 
 
}

<article> 
 
    <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b"> 
 
    <div> 
 
    <h4>Matt Di Pasquale</h3> 
 
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p> 
 
    </div> 
 
</article>

Fuente

2015-09-02 00:07:14 ma11hew28

prevenir el bloqueo de línea envolver pero permitir contenido a envolver

Respuesta

Cuestiones relacionadas