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段落上设置规则将产生类似的结果，其中段落不会浮动到列表旁边。

这个W3C wiki 条目可能有助于理解：

正如您在上面看到的，父框通常不会展开以包含浮动的子框。这通常会导致混淆，例如，当您通过浮动所有 li 元素从无序列表中创建水平菜单时，元素的所有子级都浮动。由于浮动框被从流中取出并且不会影响父框，因此浮动所有子框有效地使父框为空，并且它将折叠到零高度。有时这是不可取的，例如，如果您想在父对象上设置背景。如果父级的高度为零，则背景将不可见。

于 2013-03-25T19:16:53.407 回答