Afficher un bloc sans largeur de 100

Question

Je veux faire en sorte qu'un élément span apparaisse sous un autre élément en utilisant la propriété display. J'ai essayé d'appliquer inline-block, mais sans succès, et j'ai pensé que je pourrais utiliser block si je parvenais à éviter de donner à l'élément une largeur de 100% (je ne veux pas que l'élément s'étire). Est-ce possible, ou sinon, quelle est la bonne pratique pour résoudre ce genre de problème ?

Exemple : une liste de nouvelles où je veux mettre un lien "lire la suite" à la fin de chaque article (note : <a> au lieu 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>

Mise à jour : résolu. En CSS, appliquez

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

Answer 1

Utilisez display: table .

Cette réponse doit comporter au moins 30 caractères ; j'en ai saisi 20, alors en voici quelques autres.

Answer 2

Si je comprends bien votre question, la feuille de style en cascade suivante fera flotter votre a sous les travées et l'empêchera d'avoir une largeur de 100 % :

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

Answer 3

Que vous pouvez utiliser :

width: max-content;

Remarque : le soutien est limité, Vérifiez ici pour une liste complète des navigateurs pris en charge

Answer 4

Je voudrais garder chaque ligne dans sa propre division, donc...

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

Et puis pour le CSS :

.cell{display:inline-block}

Il est difficile de vous donner une solution sans voir votre code original.

Answer 5

Encore une fois, une réponse qui arrive peut-être un peu trop tard (mais pour ceux qui trouvent cette page pour la réponse de toute façon).

Au lieu de display:block; utiliser display:inline-block;