html - 当浏览器窗口较小时，导航栏底部 View 被截断

Question

所以我有这个我喜欢的导航栏，当窗口全尺寸显示时，它完美地位于我的两条水平线的顶部并且看起来很棒，但是当我将它调整为较小的 View 时，底部的文字被截断了。我认为它与高度 % 有关，但我很困惑。我也不明白为什么 5% 是全屏模式下完美位于水平线标签顶部的神奇数字？

HTML:

<center><div class="navbar"><a href= 'ask.php'>Ask a Question</a>
      &nbsp;
        <a href='index.html'>Log out</a>
        &nbsp;

       <a href= 'search.html'>Search</a>
       &nbsp;

       <a href= 'yourqs.php'>Your Questions</a>
       &nbsp;
       <a href= 'test.php'>All Questions</a>


<hr><hr></div></center>

CSS:

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
height: 5%;

 padding-top: 17px;
}

Answer 1

因为 5% - 在 1000 像素中 - 和 5% 在 100 像素中，不一样

您可以删除此高度并为您的 div 设置 padding-top 和 padding-bottom，或者以 'px' 设置高度