spanタグのスタイルにwidth属性を設定する方法
2022-01-26 07:28:57
spanタグのスタイルに直接width属性を設定しても、結果は出ません。
display:blockにすると、widthプロパティが有効になりますが、spanはdivと同じになりました。
display:inline-blockを設定すると、スパンは横並びになり、width属性が有効になります。
要素のdisplay属性に共通する値の説明。
1) block: ブロックオブジェクトのデフォルト値です。オブジェクトを強制的にブロックオブジェクトとして表示させ、オブジェクトの後に新しい行を追加します。
2) inline: インライン・オブジェクトのデフォルト。オブジェクトを強制的にインラインオブジェクトとして表示し、オブジェクトから行を削除します。
3) inline-block: インライン・オブジェクトとしてオブジェクトを表示しますが、オブジェクトのコンテンツはブロック・オブジェクトとして表示されます。隣のインラインオブジェクトは同じ行に表示されます。
4) non: オブジェクトを隠します。visibility 属性の hidden 値とは異なり、隠されたオブジェクトのためにその物理的空間を確保することはない。
display:blockにすると、widthプロパティが有効になりますが、spanはdivと同じになりました。
display:inline-blockを設定すると、スパンは横並びになり、width属性が有効になります。
要素のdisplay属性に共通する値の説明。
1) block: ブロックオブジェクトのデフォルト値です。オブジェクトを強制的にブロックオブジェクトとして表示させ、オブジェクトの後に新しい行を追加します。
2) inline: インライン・オブジェクトのデフォルト。オブジェクトを強制的にインラインオブジェクトとして表示し、オブジェクトから行を削除します。
3) inline-block: インライン・オブジェクトとしてオブジェクトを表示しますが、オブジェクトのコンテンツはブロック・オブジェクトとして表示されます。隣のインラインオブジェクトは同じ行に表示されます。
4) non: オブジェクトを隠します。visibility 属性の hidden 値とは異なり、隠されたオブジェクトのためにその物理的空間を確保することはない。
関連
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
overflow: hiddenを使用して、ページのスクロールバーを無効にします。
-
Htmlのヒント あなたのコードを意味的にする
-
htmlで冗長なテキストを省略記号に変換する方法
-
複数のフォームのテキストボックスの位置を揃える方法のHTML実装
-
Webアプリケーションの開発を短縮するための時間節約テクニックトップ10(グラフィックチュートリアル)
-
htmとhtmlはどう違うのですか? HTMとHTMLはどう違うのですか?
-
IE6での背景画像キャッシュ
-
Web画像フォーマットPNG、JPG、GIFの選び方・使い方
-
閲覧中のページがBaiduのスナップショットを保存しないように設定する方法
-
HTMLの基本的なディレクトリの問題(相対パスと絶対パスの違い)