html - data - Bloque de visualización sin ancho 100%

tooltip div jquery

Question

Quiero configurar un elemento span para que aparezca debajo de otro elemento utilizando la propiedad de visualización. Intenté aplicar el bloque en línea pero sin éxito, y pensé que podría usar el bloque si de alguna manera lograra evitar darle al elemento un ancho del 100% (no quiero que el elemento se "estire"). ¿Se puede hacer esto? O, si no, ¿qué es una buena práctica 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: <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, aplicar

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

Answer 1

¿No puede simplemente establecer el intervalo como display: block y establecer un width en el elemento li contiene?

Answer 2

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

Answer 3

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

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

Answer 4

Prueba esto:

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

Answer 5

Si estoy entendiendo tu pregunta correctamente, el siguiente CSS te flotará debajo de los tramos y evitará que tenga un ancho del 100%:

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

Answer 6

Utilizar display: table .

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

Answer 7

puedes usar:

width: max-content;

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