如何修復整個導航欄而不是按鈕？

如果導航欄是不固定的， 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

幫助？

來源

2017-04-16 bingbingbongbong

當您使用固定位置時，您應該確定頂部，左側和右側。試試這些代碼：

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

來源

2017-04-16 08:25:16

閱讀本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>

來源

2017-04-16 09:38:55

如何修復整個導航欄而不是按鈕？

回答

相關問題