Bloc d'affichage sans largeur de 100%

Je souhaite définir un élément span pour qu'il apparaisse sous un autre élément à l'aide de 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 réussissais à éviter de donner à l'élément une largeur de 100% (je ne veux pas que l'élément «s'étire»). Cela peut-il être fait, ou sinon, quelle est la bonne pratique pour résoudre ce genre de problème?

Exemple: une liste d'actualités où je veux mettre un lien "en savoir plus" à 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;
}

Si je comprends bien votre question, le CSS suivant 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; 
}

Utilisez display: table.

Cette réponse doit comporter au moins 30 caractères; Je suis entré 20, alors voici quelques autres.

vous pouvez utiliser:

width: max-content;

Remarque: le support est limité, vérifiez ici pour une ventilation complète des navigateurs pris en charge

Je garderais 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 d'origine.

Encore une fois: une réponse qui pourrait être un peu trop tardive (mais pour ceux qui trouvent cette page pour la réponse de toute façon).

Au lieu d' display:block;utiliserdisplay:inline-block;

Essaye ça:

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

J'ai eu ce problème, je l'ai résolu comme ceci:

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

.child {
  display: block;
}

le "white-space: nowrap" s'assure que les enfants de l'enfant (s'il en a) ne passent pas à une nouvelle ligne s'il n'y a pas assez d'espace.

sans "white-space: nowrap":

avec "white-space: nowrap":

edit: il semble que cela fonctionne aussi simplement sans la partie de bloc enfant pour moi, donc cela semble fonctionner correctement.

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

Vous pouvez utiliser les éléments suivants:

display: inline-block;

Fonctionne bien sur les liens et autres éléments.