上記は、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 がセミブロック要素であることをオンラインで知りました。これはそれと関係していますか?
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>
皆さんありがとう