0

css に関するビデオ チュートリアルを見ていると、本当に奇妙なことがわかりました。まず、要素のようなリンクを含む順序付けられていないリストを作成します。

<ul id="menuList">
    <li><a href="google.com">This</a></li>
    <li><a href="demo.org">That</a></li>
    <li><a href="pogoda.ru">Other</a></li>
</ul>

そして、いくつかのスタイリングを適用して水平メニューを作成します。

#menuList {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menuList a {
    display: block;
    float: left;
}

Thats は、フラット メニューを生成します。私の質問は、なぜこれが機能しているのかということです。私の意見では、フロートはli要素-コンテナに適用する必要があります。liはブロック レベルの要素ですか、それとも間違っていますか???

いくつかの CSS ルールは私を夢中にさせます。

4

1 に答える 1

1

ここで起こっていることは、CSS を初めて使用する場合、必ずしも簡単に理解できるとは限りません。

あなたのli要素はフローティングのないブロック要素です。あなたのa要素は、フローティングのインライン要素です。

タグのフローティングは、タグの高さaに関するシグナルを親に送信しないことを意味します。実際には、垂直スタックから部分的に持ち上げられています。lili

(補足: これがフロートの後にクリアすることが重要である理由です。クリア要素 (つまり、それにclear: both適用された要素) をそれぞれの後に配置すると、現在表示されている効果が失われます。親liがそのクリアをどのくらいの高さになるかのマーカーです。)

これは、各タグがli実質的に高さゼロであることを意味し、各タグがそのタグのいとこaに隣接しているという効果をもたらします。これは、高さのないタグaから生じるまぐれにすぎません。li

これにより、CSS を初めて使用する人は多少ひねりを加えることができます。

a個人的には、タグではなくタグをフロートする必要はないと思いますli（これをお勧めします）。そのため、疑わしいチュートリアルと見なします。

于 2012-07-01T21:33:55.020 に答える