Question

取自w3schools（访问链接以查看其外观）：

<!DOCTYPE html>
<html>
  <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>

  </body>
</html>

因此，ul和a为float:left;。现在，float说下一个元素应该浮动它，但文本不会。我错过了什么？

第二：从float 移除ul会使文字围绕它。严重的是什么？

第三：从inline 删除li不会做任何事情。但是，从float 中删除a会在元素之间添加空格。

任何人甚至可以尝试解释为什么会发生这些事情并且不做他们应该做的事情？

（最新的Chromium）

Answer 1

<ul>的宽度为100%。该文无处可去，但低于它。

从float:left中删除<ul>的原因会使文字显示在右边，因为<ul>将不会占用视觉空间，因为内容全部浮动在非浮动容器。它的高度为0px，由于宽度为100％，<p>仍会低于它，但你不会在视觉上注意到它。你可以通过给<ul>一个边框来测试这个，看看会发生什么。 <p>将浮动在最后一个浮动的<li>旁边。

<li>不是内联项。 display:inline;和display:block都不正确。它们是display:list-item;

Answer 2

这是因为当您将<ul>宽度设置为100％时，<ul>会占据全宽＆amp;将内容推到它下面。将<ul>宽度更改为auto可达到您想要的效果：

  ul
  {
    float:left;
    width:auto;
    padding:0;
    margin:0;
    list-style-type:none;
  }

为什么css float与<ul>和<li>？</li> </ul>的行为不同

2 个答案: