0

私はこのサイトの水平ナビゲーションバーで遊んでいました：

http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

次のコードで：

<head>
<style>
ul
{
     float:left;
     width:100%;
     padding:0;
     margin:0;
     list-style-type:none;
}
a
{
     float:left;
     width:6em;
     text-decoration:none;
     color:white;
     background-color:purple;
     padding:0.2em 0.6em;
     border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
</ul>

<p>
      In the example above, we let the ul element and the a element float to the left.
      The li elements will be displayed as inline elements (no line break before or    after the element). This forces the list to be on one line.
      The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
      We add some colors and borders to make it more fancy.
</p>

ulのスタイルの場合、floatが削除され、pテキストがulの周りに浮かびます。しかし、私の質問は、フロートがulではなくリンク要素に適用されることです。では、なぜpはulの空きスペースを占有することに貪欲なのですか？

明確にするのを手伝ってください。たくさんいただければ幸いです。

4

1 に答える 1

1

子リンクがフロートされているため、ULが100％の幅を占有しなくなったため、段落はリストメニューの横にフロートします。

ULoverflow:autoまたは段落にルールを設定clear:leftすると、段落がリストの横に表示されない場合でも同様の結果が得られます。

このW3Cwikiエントリは、理解に役立つ可能性があります。

上で見たように、親ボックスは通常、フロートされた子を含むように拡張されません。これにより、混乱が生じることがよくあります。たとえば、すべてのli要素をフローティングして、順序付けされていないリストから水平メニューを作成するときに、要素のすべての子がフローティングされる場合です。フロートされたボックスはフローから取り出され、親ボックスに影響を与えないため、すべての子をフローティングすると、効果的に親が空になり、高さがゼロになります。たとえば、親に背景を設定する場合など、これが望ましくない場合があります。親の高さがゼロの場合、背景は表示されません。

于 2013-03-25T19:16:53.407 に答える