html - 使用 CSS 设置样式 - float 删除样式

Question

我是网络开发的新手，发现了一个我找不到答案的问题。我正在尝试按照以下指南创建导航栏:

--> https://medium.freecodecamp.org/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786

我的问题更多是出于学习目的，因为它对我来说意义不大，我希望有人能对此有所启发。

当使用 CSS 设置指南引用样式时，使用 display:block 属性将每个 元素变成 block ，然后将它们 float 彼此相邻.很像以下内容:

   nav {
      width: 100%;
      background-color: #0b98de;
    }
      nav a {
        
        display: block;
        text-align:center;
        
        font-family: sans-serif;
        font-size: 9px;
        color: white;
    
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        
        text-decoration: none;   
     }
      nav a:hover {
        
        background-color: #17b0cf;
        
      }

<h1>HTML</h1>
  
 

    <div id="navigation-bar">
      <header id="header">
        <nav id="nav-bar">
          <a href="#">Tab1</a>
          <a href="#">Tab2</a>
          <a href="#">Tab3</a>
          <a href="#">Tab4</a>
          <a href="#">Tab5</a>
          <a href="#">Tab6</a>
          <a href="#">Tab7</a>
          <a href="#">Tab8</a>
        </nav>
      </header>
     </div>

但这似乎是在忽略 nav block 中的属性，只应用 nav a block 中的属性。出于此示例的目的，它将使导航栏保持白色，仅显示导航 block 中指定的黑色边框。它忽略导航 block 中指定的背景颜色，并且不会扩展到width:100%。我试过使用 ID 标识符和类。

我找到了一种通过使用 display:inline-block 来缓解这种情况的方法，如下所示，但我仍然不明白“隐藏的命令链”是什么。

CSS

nav {
  width: 100%;
  background-color: #0b98de;
}
  nav a {

    display: inline-block;
    float:left;
    border: 1px solid #000;

    font-family: sans-serif;
    font-size: 9px;
    color: white;

    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-decoration: none;   
 }
  nav a:hover {

    background-color: #17b0cf;

  }

Answer 1

我认为发生的事情是因为你的 anchor 元素已经 float ，你需要清除父元素上的 float ，在你的例子中是导航。我只是通过添加一个 clearfix 类重新创建了您的导航。

https://codepen.io/anon/pen/xJPmyL

<div id="navigation-bar">
  <header id="header">
    <nav id="nav-bar" class="clearfix">
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>
  </header>
 </div>
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Clearfix 解释 - https://www.w3schools.com/howto/howto_css_clearfix.asp

希望这对您有所帮助。