html - 栏高忽略文本本身的高度

Question

到目前为止，这是我的代码。问题是顶部栏太细了，它意味着在顶部链接周围有 20px 的填充，但顶部栏总共只有 40px 高，所以它似乎没有考虑链接本身的高度(即酒吧应该更高)。我该如何解决这个问题？

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      position: absolute;
      left: 0;
    }
    
    .post {
      position: absolute;
      right: 0;
    }

   <header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>
    

Answer 1

正如@Darren 在评论中所说，问题在于 absolute 定位 ( See this answer for more details how it works )。解决此问题的一种方法是使用 float，然后清除它。

Clearfix styles from HTML5Boilerplate :

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      float:left;
    }
    
    .post {
      float:right;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

   <header>
      <div id="headerbar" class="container clearfix">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

---

JSFiddle