html要素のwidth属性が効かない問題の解決方法

1. 要素の width 属性は効果がありません。 まずプログラムを実行して見てみましょう。 [html] 123 スパンに含まれるコンテンツに応じて幅が自動的に変更されることがわかります。 これは次の理由によるものです: inline 要素 (span 要素など、デフォルトでインラインにすることも、 1. 要素の width 属性は効果がありません
最初にプログラムを実行して確認してください:

ヒント: 最初にコードの一部を変更してから実行できます

スパンは、それに含まれるコンテンツに自動的に基づいて設定されます 幅を変更するには
これは次の理由によります: インライン要素 (スパン要素、または display: inline を備えた要素など、デフォルトでインラインにすることができます) の場合
幅と高さはのみ利用可能ですIE5.x および IE6 以降では、HasLayout はバージョンの quirks モードでトリガーされます。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。
「layout」を持つ要素が「inline」も表示する場合、その動作は標準で言及されている inline-block と非常によく似ています。通常のテキストと同様に段落内で水平方向に連続して配置され、vertical-align の影響を受けます。コンテンツに応じてサイズを適応的に調整できます。これは、IE/Win だけでは、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。これは、他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるためです。レイアウトはインラインブロックになります。
解決策:
<1>ASP.NET ページから W3C 標準宣言を削除します (非推奨):

123
<2>推奨:
display:block が設定されている場合、width 属性が有効になりますが、このときの span は p と同じになります。
display:inline-block が設定されている場合、スパンは同じ行にリストされ、width 属性が有効になります。

要素表示属性の一般的な値の説明:
block: ブロック オブジェクトのデフォルト値。オブジェクトを強制的にブロック オブジェクトとしてレンダリングし、オブジェクトの後に新しい行を追加します。
inline: インラインオブジェクトのデフォルト値。オブジェクトを強制的にインライン オブジェクトとしてレンダリングし、オブジェクトから行を削除します。 (インライン) 「CSS 決定版ガイド」中国語テキスト表示: ブロックレベル要素ではない表示要素はすべてインライン要素です。そのパフォーマンスの特徴は「列レイアウト」という形式です。ここでの「列レイアウト」とは、その表現形式が常に列で表示されることを意味します。たとえば、インライン要素 border-bottom:1px Solid #000; を設定すると、それが各行で繰り返され、各行の下に細い黒い線が表示されます。ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます。
inline-block: オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行上にレンダリングされます。
non: 隠されたオブジェクト。 visibility 属性の hidden 値とは異なり、非表示オブジェクト用に物理スペースを予約しません。
inline(display:inline;)要素は、lineレイアウトに属し、1行にレイアウトする特性があるため、幅と高さを設定することができません。
123 の場合、width 属性は効果 .
(フローティング) 指定された要素を通常のドキュメント フローから切り離すことにより、特別なレイアウト特性を作成します。また、FLOAT はブロックレベルの要素に適用する必要があります。つまり、フローティングはインライン タグには適用されません。言い換えると、FLOAT が適用されると、この要素はブロック レベルの要素として指定されます。
123

2. CSS の表示: inline 属性と float の違い
Display: inline;この機能は、ブロックレベルの要素を p などのインライン要素に変換することです。 inline 属性を設定すると、別の行を占有することはなくなります。ただし、float プロパティ ページを使用しても同じ効果を実現できます。 (インライン要素とブロックレベル要素については、インライン要素とブロックレベル要素を参照してください。) 要素に inline 属性が設定されて inline 要素になった場合、width 属性を設定しても効果はありません。
display: inline のブロックレベル要素への影響を読んだ後、inline 要素への float の影響を見てみましょう
つまり、inline 要素が float 属性を設定すると、実際にはそれがブロックレベル要素であると認識され、幅属性を設定できます

以上がhtml要素のwidth属性が効かない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。