ホームページ > ウェブフロントエンド > htmlチュートリアル > float:left と display:inline を一緒に使用することは何を意味しますか? _html/css_WEB-ITnose

float:left と display:inline を一緒に使用することは何を意味しますか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:40:01
オリジナル
1809 人が閲覧しました

上記は、html、css、renderingsが議論に至る(ソリューション)(ソリューション)


1.なぜフロート左に左に左に左に表示され、インドラインで使用されるインラインで使用されるインラインで使用されるインラインで使用されるインラインである理由です。李でも同じ時間ですか?体感効果はほぼ同じです。 li がセミブロック要素であることをネットで知りました。これと関係がありますか?
2. なぜ a では display: ブロックが必要なのですが、それを削除しても効果は変わらないようです。
3. 元々「FL」という文字が画像と並んでいたのですが、CSSで幅を72pxに設定したところ、FLが自動的に下に移動してしまいました。

はブロックである div とは異なり、display:block は定義ブロックであるため、インライン要素です (この 2 つの違いは、改行が解析されるかどうかです)。最初のブロックから左側のフロートを削除して、下に追加できます。 FLの絞り出しに関してはフローティングについてもっと勉強したほうが良いでしょう。私もフロントエンド プログラムに参加したばかりですが、お互いに学ぶことができます。

いくつか質問があります: 1. li では float left と display inline が同時に使用されるのはなぜですか?体感効果はほぼ同じです。 li がセミブロック要素であることをオンラインで知りました。これはそれと関係していますか?
2. なぜ a では display: ブロックが必要ですが、それを削除しても効果は変わらないようです。

3. 元々「FL」という文字が画像と並んでいたのですが、CSSで幅を72pxに設定したところ、FLが自動的に下に移動してしまいました。


1 つ目: フロントエンドではなく、以前に見たことがあるような気がしますが、それについては少し知っています。IE6 が普及していたとき、この行は多くの互換性の問題を解決しました。
2 番目の display:block; はブロックを表示するもので、バックグラウンドを追加する場合と追加しない場合では大きな違いがあります。
3 番目: li の幅を 72、画像の幅を 68 として定義しました。設定した font-size が 10px の場合、画像の幅に FL を加えた値は 88 になります。定義した 72 を超える場合は、新しい行にする必要があります

float の後に、display: inline は、IE6 の二重マージンの問題を解決するためのものです

		<nav>		<ul>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>			<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		</ul>		</nav>
ログイン後にコピー


皆さんありがとう

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート