我的顶级酒吧没有完全填充

我的网站上的顶栏并未完全改变颜色......底部有一条条。有谁知道为什么？我的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

我的顶级酒吧没有完全填充

回答

相关问题