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> 

但是，這似乎做的是在導航塊忽略的屬性和唯一應用性能的導航塊 。 對於此示例，它將使導航欄保持白色，僅顯示導航塊中指定的黑色邊框。 它會忽略導航塊中指定的背景色 ，並且不會擴展到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;
}

Clearfix解釋- 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之間的區別。實際上，由於a是一個內聯元素a, span etc您實際上不需要float或display-inline 。

添加display: block您使所有內聯元素（錨）的行為都類似於divs ...因此，出現了float: left ，使它們看起來像是行內聯元素，而另一個卻被弄亂了實際的導航。 您基本上是創建了自己的問題。

我稍微更改/清理了CSS：

 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; } 

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

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，並且由於您沒有將任何CSS應用於navigation-bar和header ，因此我繼續將其從HTML中刪除，但是如果您確實在CSS中包含了這些ID，只需重新添加它們即可。 ..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>