1. ホーム
  2. html

[解決済み] 100%幅のないブロックを表示する

2022-09-24 01:05:29

質問

displayプロパティを使って、span要素を他の要素の下に表示させたいと思います。私はinline-blockを適用しようとしましたが成功せず、どうにかして要素の幅を100%にしないようにすれば、blockを使用できると考えました(私は要素が"stretch out"になりたくはありません)。これは可能ですか、またはそうでない場合、この種の問題を解決するための良いプラクティスは何ですか?

例: ニュースリストで、各投稿の最後に "続きを読む" リンクを設定したい場合 (注。 <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; 
}