Question

以下是HTML / CSS。

＆＃13;

li {
  float: left;
  background-color: #BD4932;
}

li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}

＆＃13;

<h1>Dynamic horizontal centering</h1>
<h2>With <span class="orange">display:table</span></h2>
<nav role='navigation' class="nav-table">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

＆＃13;

结果：http://codepen.io/anon/pen/LVeBGv

我的理解是块级元素强制跟随元素到新行。为什么display: block;没有将列表项放在新行中？

Answer 1

不，默认情况下，阻止级别元素占用其父级的100％宽度。不会推动新行中的下一个元素。您的锚点父项（列表项）浮动到左侧，这意味着它只会作为其内容的宽度。

如果您希望锚点（和列表项）移动到下一行，请从float: left中删除li

li {
  /*float: left;*/
  background-color: #BD4932;
}

li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}

<h1>Dynamic horizontal centering</h1>
<h2>With <span class="orange">display:table</span></h2>
<nav role='navigation' class="nav-table">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

或向其添加clear: both：

li {
  float: left;
  clear: both;
  background-color: #BD4932;
}

li a {
  display: block;
  padding: .5em 1em;
  color: #FFFAD5;
}

<h1>Dynamic horizontal centering</h1>
<h2>With <span class="orange">display:table</span></h2>
<nav role='navigation' class="nav-table">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Answer 2

因为您使用的是float: left。

如果您指定了float：left（或right），则

display: block是多余的。

Answer 3

这将满足您的要求。（摘下float:left;）

ul {
     list-style: none;    
   }

li {
      background-color: #BD4932;
    }

    li a {
      display: block;
      padding: .5em 1em;
      color: #FFFAD5;
    }

    <h1>Dynamic horizontal centering</h1>
    <h2>With <span class="orange">display:table</span></h2>
    <nav role='navigation' class="nav-table">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>

阻止级别元素行为

3 个答案: