如何在懸停時關閉底部的3px間隙？

我掙扎着一個問題，我的按鈕沒有拉伸父div的全部高度。當我將鼠標懸停在從按鈕底部到父級div底部的〜3px間隙處。如何在懸停時關閉底部的3px間隙？

我把整個代碼分解到這裏的那個小代碼，問題仍然存在。如果我在#main_buttons，#header_big和.buttons上使用float: left;，問題就消失了。但如果我使用浮動#main_buttons，#header_big我的整個網站崩潰，所以這不是一個解決方案，我不得不重新編碼其餘的網站。還有其他解決方案嗎？ https://jsfiddle.net/ewktoqrL/

#header_big { 
    background-color: #cccccc; 
    min-width: 100%; 
    min-height: 100%; 
    float: left; 
} 

#main_buttons { 
    min-height: 100%; 
    float: left; 
} 

.buttons { 
    max-height: 100%; 
    float: left; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 12px; 
    padding-top: 14px; 
} 

.buttons:hover { 
    background-color: #efefef; 
} 


<div id="header_big"> 
    <div id="main_buttons"> 
    <div id="home" class="buttons"> 
     Home 
    </div> 
    <div id="cv" class="buttons"> 
     CV 
    </div> 
    <div id="nyheter" class="buttons"> 
     Nyheter 
    </div> 
    <div id="movie" class="buttons"> 
     Film 
    </div> 
    <div id="games" class="buttons"> 
     Spill 
    </div> 
    <div id="music" class="buttons"> 
     Musikk 
    </div> 
    </div> 
</div>

來源

2017-12-02 Rajohan

我只想對你.buttons添加margin-bottom: -3px;。我認爲這會解決你的問題。但是，我不確定問題來自哪裏。我認爲這可能來自.buttons中的填充。

來源

2017-12-02 18:11:01

如何在懸停時關閉底部的3px間隙？

回答

相關問題