100％幅のない表示ブロック

displayプロパティを使用して、span要素を別の要素の下に表示されるように設定したい。インラインブロックを適用しようとしましたが、成功しませんでした。何らかの方法で要素に100％の幅を与えないようにすると、ブロックを使用できると考えました（要素を「引き伸ばしたくない」）。これは可能ですか、そうでない場合は、この種の問題を解決するための優れた実践方法は何ですか？

例：各投稿の最後に「もっと読む」リンクを設定するニュースリスト（注：<a>ではなく<span>）

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

更新：解決しました。CSSで適用

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

私があなたの質問を正しく理解している場合、次のCSSはaをスパンの下にフロートさせ、100％の幅を持たないようにします：

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

を使用しdisplay: tableます。

この回答は30文字以上である必要があります。私は20を入力したので、ここにいくつかあります。

あなたは使うことができます：

width: max-content;

注：サポートには制限があります。サポートされているブラウザの詳細については、こちらをご覧ください

各行を独自のdivに保持するので、...

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

そしてCSSのために：

.cell{display:inline-block}

元のコードを見ずに解決策を提供することは困難です。

繰り返しますが、答えは少し遅すぎるかもしれません（とにかくこのページで答えを見つけた人にとっては）。

代わりに display:block;使用display:inline-block;

これを試して：

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

私はこの問題を抱えていたので、次のように解決しました：

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

.child {
  display: block;
}

「空白：nowrap」は、十分なスペースがない場合、子の子（もしあれば）が新しい行に折り返されないようにします。

「空白：nowrap」なし：

「white-space：nowrap」で：

編集：私にとっては子ブロック部分なしでも機能するようですので、これはうまく機能するようです

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

次のものを使用できます。

display: inline-block;

リンクやその他の要素でうまく機能します。