Question

所以我喜欢这个导航栏，当窗口全尺寸时，它完全位于我的两条水平线上，看起来很棒，但是当我将它调整到较小的视图时，这些字会在底部被切断。我认为它与身高％有关，但我很难过。我也不明白为什么在全屏模式下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％ - 在1000px中 - 和5％在100px中，不一样

你可以移除这个高度并为你的div设置padding-top和padding-bottom，或者在'px'中设置高度

当浏览器窗口较小时，导航栏底部视图会被切断

1 个答案: