Question

如果导航栏未修复， the entire thing is visible including the extra non-link space.

代码：

div class="sec1">
<div class="topnav" id="myTopnav">
  <a href="mikaproj.html"  class="project"> TEXT</a>
  <a href="https://www.instagram.com/jewishtea/" target="_blank" 
class="button"> TEXT</a>
  <a href="https://twitter.com/aliacatil" target="_blank" 
class="button"> TEXT</a>
  <a href="https://www.youtube.com/channel/UCEEvH5lJzkCf7rb10CQAnyg" ta 
   rget="_blank" class="button"> TEXT</a>
    </div>
</div>

的CSS：

.topnav {
    background-color: #f7b733;
    overflow: hidden;
    padding-top: 0px;
    position: relative;


}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: Osaka, serif;
 }


.topnav a:hover {
   background-color: #fc4a1a;
   color: white;
}

但是当它被修复时，The extra yellow space disappears

帮助？

Answer 1

当您使用固定位置时，您应确定顶部，左侧和右侧。试试这些代码：

.is-fixed
{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}

Answer 2

阅读本css positioning

.topnav {
    background-color: #f7b733;
    overflow: hidden;
    padding-top: 0px;
    position: fixed;
    left:0;
    right:0;


}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: Osaka, serif;
 }


.topnav a:hover {
   background-color: #fc4a1a;
   color: white;
}

<div class="sec1">
<div class="topnav" id="myTopnav">
  <a href="mikaproj.html"  class="project"> TEXT</a>
  <a href="https://www.instagram.com/jewishtea/" target="_blank" 
class="button"> TEXT</a>
  <a href="https://twitter.com/aliacatil" target="_blank" 
class="button"> TEXT</a>
  <a href="https://www.youtube.com/channel/UCEEvH5lJzkCf7rb10CQAnyg" ta 
   rget="_blank" class="button"> TEXT</a>
    </div>
</div>

如何修复整个导航栏而不是按钮？

2 个答案: