CSS样式化-浮动删除样式化

Question

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

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

我的问题更多是出于学习目的，因为这对我而言意义不大，我希望有人可以对此有所了解。

使用CSS设置参考指南样式时，请使用 display：block 属性将每个 元素转换为块，然后将它们彼此相邻地浮动 。类似于以下内容：

   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 块中的属性，而仅应用 nav a 块中的属性。对于此示例，它将使导航栏保持白色，仅显示导航块中指定的黑色边框。它会忽略在导航块中指定的背景颜色，并且不会扩展到 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

我认为这是因为锚元素已浮动，因此您需要清除父元素上的浮动（在您的情况下为nav）。我仅通过添加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;
}

明确的解释-https://www.w3schools.com/howto/howto_css_clearfix.asp

希望这会有所帮助。

Answer 2

简短答案：因为nav的高度为0。

它的高度为0，因为它的内容是浮动的。浮动元素在计算其父代的高度时会被忽略。

解决此问题的好方法是将display: flex;添加到nav。在这种情况下，嵌套元素将被自动屈曲而不是浮动。

另一种选择是将float: left;添加到nav。

Flex更好，因为它是现代，非常强大且灵活的技术。浮游物是石器时代的东西。

Answer 3

您所拥有的内容归结为一个块元素div和一个内联元素a, span etc等之间的区别。实际上，您不需要浮点数或display-inline，因为{{1 }}是嵌入式元素。

一旦添加了a，就使所有内联元素（锚点）的行为都像divs一样……由于那样，所以display: block使它们看起来像左侧的行内联元素对方，但搞砸了实际的资产净值。您基本上是创建了自己的问题。

我稍微更改/清洁了CSS：

float: left

nav {
  background-color: #0b98de;
  padding: 10px 0px 10px 0px;
}

nav a {
  font-family: sans-serif;
  font-size: 9px;
  color: white;
  padding: 15px 10px 10px 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #17b0cf;
}

Answer 4

您的nav正在崩溃，因为未指定高度或浮点数。只需将其添加到您的nav：

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

  float: left; /* Either specify a height here or float - otherwise, this nav collapses on you */
}
  nav a {

    display: 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;

  }

使用此方法，您无需担心其他答案中提到的清晰类-编写更少，做更多（我知道这是jquery的口号，但这也适用于这里:)）

然后您的HTML将如下所示：

<nav>
      <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>

nav上不需要ID，并且由于您没有为navigation-bar和header申请任何CSS，因此我继续将其从HTML中删除，但是如果您确实这样做，将这些ID放在您的CSS中，只需重新添加它们即可……对于您的HTML，它看起来像这样：

<div id="navigation-bar">
  <header id="header">
    <nav>
      <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>