[解決済み] 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;
}
関連
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] 要素の幅を100%からパディングを引いた幅にするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?