Bloque de visualización sin ancho del 100%

Quiero configurar un elemento de tramo para que aparezca debajo de otro elemento usando la propiedad de pantalla. Intenté aplicar el bloque en línea pero sin éxito, y pensé que podría usar el bloqueo si de alguna manera lograba evitar darle al elemento un ancho del 100% (no quiero que el elemento se "estire"). ¿Se puede hacer esto o, en caso negativo, cuál es la mejor práctica para resolver este tipo de problemas?Bloque de visualización sin ancho del 100%

Ejemplo: una lista de prensa en la que desea establecer un "leer más" que aparece al final de cada post (nota: en lugar de <a><span>)

<li> 
<span class="date">11/15/2012</span> 
<span class="title">Lorem ipsum dolor</span> 
<a class="read-more">Read more</a> 
</li>

Actualización: Resuelto. En CSS, aplicar

li { 
    clear: both; 
} 
li a { 
    display: block; 
    float: left; 
    clear: both; 
}

Fuente

2012-10-03 Staffan Estberg

¿Posee cualquier tipo de código (HTML o CSS) nos muestran? Es difícil trabajar en el problema sin algo en lo que realmente trabajar. También una demostración en [jsfiddle] (http://jsfiddle.net) sería buena. –

Pensé que no necesitaba ningún código de muestra, ya que solo se trata de posicionar un elemento de tramo. Ver publicación actualizada. –

Puede reducir seriamente todo ese marcado con solo usar una línea de código como mencioné a continuación. – ha404

Si estoy entendiendo su pregunta correctamente, el siguiente CSS flotará su una por debajo de los vanos y evitar que tiene una anchura de 100%:

a { 
    display: block; 
    float: left; 
    clear: left; 
}

Fuente

2012-10-03 12:57:25

Intenté aplicar esto, pero dado que los elementos de span (título y fecha, en el ejemplo) no tienen float, el enlace se posiciona antes del último lapso. Supongo que una solución sería hacer que todos los elementos secundarios floten en li. –

Esto funciona si aplico un clearfix para el padre li. Irá con esta solución, gracias PJ. –

¡No hay problema, me alegra ayudar! –

Me gustaría mantener cada fila a su propio div, así que ...

<div class="row"> 
    <div class="cell">Content</div> 
</div> 
<div class="row"> 
    <div class="cell">Content</div> 
</div>

Y luego para el CSS:

.cell{display:inline-block}

Es difícil darle una solución sin ver tu código original.

Fuente

2012-10-03 12:29:10 George

Gracias, pero preferiría no mezclar ningún elemento div. –

¡Buena solución! Debería tener algunos upvotes más ... – Levit

¿No puedes establecer el lapso como display: block y establecer un width en el elemento que contiene li?

Fuente

2012-10-03 13:11:07

El li necesita tener ancho automático debido al título y el intervalo de fechas. –

De nuevo: una respuesta que podría ser un poco tarde (pero para aquellos que encuentran esta página para la respuesta de todos modos).

En lugar de display:block; uso display:inline-block;

Fuente

2013-11-01 06:30:06 Renske

Prueba esto:

li a { 
    width: 0px; 
    white-space:nowrap; 
}

Fuente

2014-05-27 15:46:27 Roberto

100

Uso display: table.

Esta respuesta debe tener al menos 30 caracteres; Ingresé 20, así que aquí hay algunos más.

Fuente

2014-10-15 17:47:40 ha404

funciona bien gracias –

solución Genius. 'margin: 0 auto;' si lo necesita centrado. – Mafia

Creo que eres increíble. – billynoah

puede utilizar:

width: max-content;

Nota: El soporte es limitado, check here para un desglose completo de los navegadores que soporten

Fuente

2017-09-13 13:46:00

Bloque de visualización sin ancho del 100%

Respuesta

Cuestiones relacionadas