Anzeigeblock ohne 100% Breite

Ich möchte mithilfe der display-Eigenschaft festlegen, dass ein span-Element unter einem anderen Element angezeigt wird. Ich habe versucht, Inline-Block anzuwenden, aber ohne Erfolg, und dachte, ich könnte Block verwenden, wenn ich es irgendwie schaffen würde, dem Element keine Breite von 100% zu geben (ich möchte nicht, dass sich das Element "ausdehnt"). Kann dies getan werden oder wenn nicht, was ist eine gute Praxis, um diese Art von Problem zu lösen?

Beispiel: Eine Nachrichtenliste, in der ich am Ende jedes Beitrags einen Link "Mehr lesen" setzen möchte (Hinweis: <a>statt <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Update: Gelöst. In CSS anwenden

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

Wenn ich Ihre Frage richtig verstehe, schwebt das folgende CSS Ihr a unter den Bereichen und verhindert, dass es eine Breite von 100% hat:

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

Verwenden Sie display: table.

Diese Antwort muss aus mindestens 30 Zeichen bestehen. Ich habe 20 eingegeben, also hier noch ein paar.

Sie können verwenden:

width: max-content;

Hinweis: Die Unterstützung ist begrenzt. Hier finden Sie eine vollständige Aufschlüsselung der unterstützenden Browser

Ich würde jede Zeile für sich behalten, also ...

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

Und dann zum CSS:

.cell{display:inline-block}

Es ist schwierig, eine Lösung zu finden, ohne Ihren Originalcode zu sehen.

Nochmals: Eine Antwort, die vielleicht etwas zu spät ist (aber für diejenigen, die diese Seite sowieso für die Antwort finden).

Anstelle von display:block;Gebrauchdisplay:inline-block;

Versuche dies:

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

Ich hatte dieses Problem, ich habe es so gelöst:

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

.child {
  display: block;
}

Der "Leerraum: Nowrap" stellt sicher, dass die Kinder des Kindes (falls vorhanden) nicht in eine neue Zeile umbrechen, wenn nicht genügend Platz vorhanden ist.

ohne "Leerraum: Nowrap":

mit "white-space: nowrap":

edit: es scheint, dass es auch nur ohne den untergeordneten Blockteil für mich funktioniert, also scheint nur dies gut zu funktionieren.

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

Können Sie nicht einfach die Spanne als display: blockund eine widthfür das enthaltende liElement festlegen ?

Sie können Folgendes verwenden:

display: inline-block;

Funktioniert gut bei Links und anderen Elementen.