0

取自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 使文本围绕它流动。严重的是什么鬼？

第三：删除inlinefromli 什么都不做。然而，删除floatfroma 会在元素之间放置空格。

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

（最新铬）

4

2 回答 2

4

的宽度<ul>为100%。文字无处可去，只能在其下方。

float:left从will 中删除<ul>会使文本显示在右侧的原因是，<ul>将不再占用视觉空间，因为内容都浮动在非浮动容器中。它将是 0px 高，并且<p>由于 100% 的宽度，它仍然会下降到它的下方，但是您不会在视觉上注意到它。您可以通过给<ul>a 边框来测试它，看看会发生什么。将<p>浮动在最后一个浮动的旁边<li>。

<li>s 不是内联项。display:inline;并且display:block都是不正确的。他们是display:list-item;

于 2013-02-04T16:47:36.143 回答
1

这是因为当您将<ul>宽度设置为 100% 时，它<ul>会占据整个宽度并将内容推到其下方。<ul>将宽度更改为auto将达到您想要的效果：

  ul
  {
    float:left;
    width:auto;
    padding:0;
    margin:0;
    list-style-type:none;
  }
于 2013-02-04T16:49:07.783 回答