我的頂級酒吧沒有完全填充

我的網站上的頂欄並未完全改變顏色......底部有一條條。有誰知道爲什麼？我的website和error。我的代碼：我的頂級酒吧沒有完全填充

HTML

<header> 
    <ul> 
    <li> <a href="/">Home</a></li> 
    <li> <a href="https://github.com/reteps" >Github</a></li> 
    <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a></li> 
    </ul> 
</header>

CSS上ul標籤

header ul { /*selects list of stuff*/ 
    list-style-type: none; /*no bullet points*/ 
    margin: 0; 
    padding: 0; 
    background-color: #70deef; 
    position: fixed; 
    width: 100%; 
    height: 50px; 
} 
header li { /*selects list element*/ 
    float: left; /*move to left*/ 
} 
header li a { 
    display: block; /*makes a square*/ 
    color: #ffffff; /*white*/ 
    text-align: center; 
    text-decoration: none; 
    padding: 20px 20px 10px; 
} 
header li a:hover { 
    background-color: #d6d6d6; /*grey*/ 

}

來源

2017-02-13 lol

你'ul'有50高度的孩子'li'的只是作爲文本和填充一樣高。刪除'ul'高度。 –

我應該把高度放在'li'標籤內嗎？ – lol

只需從'ul'類刪除高度。讓填充和文本高度控制標題高度。 –

刪除高度。您的塊高已經由內容font-size和padding（加上邊距/邊框，如果有的話）確定

來源

2017-02-13 01:50:54 Rikin

關於您在其他帖子上的建議編輯，請不要將代碼轉換爲非工作片段。 http://stackoverflow.com/review/suggested-edits/15188993 –

在ul標記的情況下，永遠不要爲高度屬性。由於它可能會導致不必要的差距。

ul { 
    padding: 0; 
    margin: 0; 
    overflow: auto; 
}

這是最小的，但造型足以用於UL標籤

來源

2017-02-13 03:45:04

我的頂級酒吧沒有完全填充

回答

相關問題