Bloque de visualización sin ancho del 100%

95

Quiero configurar un elemento span para que aparezca debajo de otro elemento usando la propiedad display. Intenté aplicar inline-block pero sin éxito, y pensé que podría usar block 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 si no, cuál es una buena praxis para resolver este tipo de problemas?

Ejemplo: una lista de noticias donde quiero establecer un enlace "leer más" al final de cada publicación (nota: en <a>lugar de <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, aplique

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

— Staffan Estberg
fuente

1

¿Tiene algún marcado (HTML o CSS) para mostrarnos? Es difícil trabajar en el problema sin nada en lo que realmente trabajar. También una demostración de jsfiddle sería buena.

— Tom Oakley

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

— Staffan Estberg

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

— ha404

73

Si entiendo su pregunta correctamente, el siguiente CSS lo hará flotar por debajo de los tramos y evitará que tenga un ancho del 100%:

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

— PJ McCormick
fuente

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

— Staffan Estberg

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

— Staffan Estberg

157

Utilice display: table.

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

— ha404
fuente

13

Solución genial. margin: 0 auto;si lo necesita centrado.

— Mafia

4

Creo que eres genial.

— Billynoah

1

display: table;funciona, pero no acepta ningún relleno.

— donquixote

@ ha404 tienes razón, ¡el relleno funciona! jsfiddle.net/wgj7xvLe/4 al menos en mi navegador (Chromium).

— donquixote

3

@donquixote debería aceptar el relleno siempre que use border-collapse: separado. acabo de tener ese problema.

— Brad

30

puedes usar:

width: max-content;

Nota: el soporte es limitado, consulte aquí para obtener un desglose completo de los navegadores compatibles

— Mustafa J
fuente

¡Nunca había oído hablar de esto! Interesante.

— Ryan

Fue bueno desde Chrome 46 y FF 66. Debería aceptarse respuesta. inline-blocket al estaba rompiendo mi diseño.

— i336_

1

@ i336_ A día de hoy, todavía no es compatible con el navegador Edge.

— ChrisW

¿Edge o Chromium Edge? (Para ser claros; el primero estará en transición durante bastante tiempo ...)

— i336_

Según caniuse.com, es compatible con Edge a partir de Edge 79 lanzado el 14 de enero de 2020. En total tiene una calificación de soporte del 92%. caniuse.com/?search=max-content Esta es una buena bienvenida para mí. Cuando escuché sobre él por primera vez hace casi 2 años, no tenía suficiente soporte para que yo lo usara en producción, pero ahora lo tiene.

— Xandor

7

Mantendría cada fila en 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 su código original.

— Jorge
fuente

1

Gracias, pero prefiero no mezclar ningún elemento div.

— Staffan Estberg

5

Nuevamente: 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;usardisplay:inline-block;

— Renske
fuente

2

Prueba esto:

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

— Roberto
fuente

1

Tuve este problema, lo resolví así:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

el "espacio en blanco: nowrap" se asegura de que los hijos del niño (si tiene alguno) no se ajustan a la nueva línea si no hay suficiente espacio.

sin "espacio en blanco: nowrap":

con "espacio en blanco: nowrap":

editar: parece que también funciona sin la parte del bloque secundario para mí, así que esto parece funcionar bien.

.parent {
  white-space: nowrap;
  display: table;
}

— Novato
fuente

0

Puede utilizar lo siguiente:

display: inline-block;

Funciona bien en enlaces y otros elementos.

— Bruno Leveque
fuente