はブロック要素の例です。
display:inline は要素をインライン要素として表示します インライン要素の特徴は次のとおりです:
と他の要素は同じ行にあります。
高さ、行の高さ、上下の余白は変更できません。 ;
幅はそれです テキストまたは画像の幅は変更できません。
、、
inline と block は要素の線の幅と高さを制御できます。 切り替える必要がある状況は次のとおりです。
inline 要素を新しい行で開始します。
block 要素と他の要素を同じ位置に保ちます。 line;
インライン要素の幅を制御します (特にナビゲーション バーに便利です);
インライン要素の高さを制御します
幅を設定せずに、ブロック要素のテキストと同じ幅の背景色を設定できます。
display:inline-block はオブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。
inline-block 要素の機能:
オブジェクトをインライン オブジェクトとして表示しますが、オブジェクトのコンテンツはブロック オブジェクトとして表示されます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。 (正確には、この属性が適用される要素はインライン オブジェクトとしてレンダリングされ、周囲の要素は同じ行上に残りますが、プロット要素の幅と高さの属性は設定できます)
すべてのブラウザがこれをサポートしているわけではありませんOpera と Safari は、IE のインライン要素に display:inline-block を使用します。IE では認識されませんが、display:inline-block を使用すると、IE でレイアウトがトリガーされ、インライン要素に表示が表示されます。インラインブロック属性。上記の分析から、IE ではブロック要素に display:inline-block 属性を設定しても inline-block の効果が得られない理由を理解するのは難しくありません。現時点では、ブロック要素のレイアウトは display:inline-block によってのみトリガーされ、元々は行レイアウトであるため、トリガー後もブロック要素は行レイアウトのままであり、インラインとしてレンダリングされません。 Opera のブロック要素のようなオブジェクト。
IE下のブロック要素でdisplay:inline-blockの効果を実現するにはどうすればよいですか?
2 つの方法があります:
1. まず、display:inline-block 属性を使用してブロック要素をトリガーし、次に、display:inline を定義してブロック要素をインライン オブジェクトとしてレンダリングします (2 つのディスプレイを 2 つに配置する必要があります) CSS ステートメントが次々と表示される これは、IE の典型的なバグです。最初に display:inline-block を定義し、その後表示を inline または block に戻すと、レイアウトは消えません。コードは次のとおりです (...他の属性は省略されています):
div {display:inline-block;...}
div {display:inline;}
2. ブロック要素を直接インラインに設定します。 object Render (属性 display:inline を設定) を実行し、ブロック要素のレイアウト (zoom:1 など) をトリガーします。コードは次のとおりです:
div {display:inline;zoom:1;...}
