112

display プロパティを使用して、スパン要素を別の要素の下に表示するように設定したいと考えています。私はインラインブロックを適用しようとしましたが、成功しませんでした.要素に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;
}
4

8 に答える 8

176

を使用しdisplay: tableます。

この回答は 30 文字以上にする必要があります。20枚入りましたので、あと数枚。

于 2014-10-15T17:47:40.943 に答える
78

あなたの質問を正しく理解している場合、次の CSS は a をスパンの下に浮かせ、幅が 100% にならないようにします。

a {
    display: block; 
    float: left; 
    clear: left; 
}
于 2012-10-03T12:57:25.803 に答える
8

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

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

次に、CSS の場合:

.cell{display:inline-block}

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

于 2012-10-03T12:29:10.190 に答える
6

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

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

于 2013-11-01T06:30:06.003 に答える