Bloque de visualización sin ancho del 100%

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;
}

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; 
}

Utilice display: table.

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

puedes usar:

width: max-content;

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

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.

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;

Prueba esto:

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

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;
}

Puede utilizar lo siguiente:

display: inline-block;

Funciona bien en enlaces y otros elementos.