Html 一个子高出子高的父级（空白）

我有一个菜单，上面有一个垂直排列的无序列表。 子对象的宽度设置为100%，并且它是父对象中唯一的子对象。父项没有设置高度

父母的身高延伸到孩子的身高，但延伸太远（大约2-3倍）。 浅蓝色区域是父对象的主体。您可以清楚地看到高度高于带有锚的列表。如果使用锚点检查列表，将看到高度较小

下面是代码片段：

#导航{
边缘底部：10px；
填充：15px；
背景：#213059
}
#导航>导航{
显示：内联块；
宽度：100%；
}
#导航>导航>导航{
列表样式类型：无；
保证金：0；
}
#导航>导航>ul>li{
位置：相对位置；
}
#导航a.nav_按钮{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33008A00+67005700+83002400+100；绿色+3D+%231*/
背景：#4E7C87；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4e7c87'，endColorstr='#304480'，GradientType=0）；/*IE6-9*/
颜色：白色；
浮动：左；
填充：10px 25px 10px 15px；
边框：1px纯黑；
字体大小：1.2米；
文本转换：大写；
文字装饰：无；
}
#导航a.nav_按钮：悬停{
背景：#4E7C87；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4e7c87'，endColorstr='#4473c8'，GradientType=0）；/*IE6-9*/
}

编辑评论后的答案：

添加

垂直对齐：底部至
#导航>导航
规则。由于这是一个
内联块
，否则它将在基线处对齐，这将导致一些剩余的下行空间（如您的问题中所示）

我还建议添加
overflow:auto到
ul
（将浮动
li
s包装在其中）：


#导航{
边缘底部：10px；
填充：15px；
背景：#213059
}
#导航>导航{
显示：内联块；
宽度：100%；
垂直对齐：底部对齐；
}
#导航>导航>导航{
列表样式类型：无；
保证金：0；
溢出：自动；
}
#导航>导航>ul>li{
位置：相对位置；
}
#导航a.nav_按钮{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33008A00+67005700+83002400+100；绿色+3D+%231*/
背景：#4E7C87；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#253767%，#2d2f62 83%，#213059 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4e7c87'，endColorstr='#304480'，GradientType=0）；/*IE6-9*/
颜色：白色；
浮动：左；
填充：10px 25px 10px 15px；
边框：1px纯黑；
字体大小：1.2米；
文本转换：大写；
文字装饰：无；
}
#导航a.nav_按钮：悬停{
背景：#4E7C87；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#4e7c87 0%，#4d5d87 17%，#2e4369 33%，
#3C8B 67%，#4d63aa 83%，#4d84e5 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4e7c87'，endColorstr='#4473c8'，GradientType=0）；/*IE6-9*/
}











浮动
li
标记，而不是
a
标记。但是，您必须在
a
标签上将其更改为
display:block

#navigation > nav > ul > li {
    position: relative;
    float: left;
}


#导航{
边缘底部：10px；
填充：15px；
背景：#213059
}
#导航>导航{
显示：块；
溢出：隐藏；
宽度：100%；
}
#导航>导航>导航{
列表样式类型：无；
保证金：0；
}
#导航>导航>ul>li{
位置：相对位置；
float:left；/*添加了这个*/
}
#导航a.nav_按钮{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33008A00+67005700+83002400+100；Gre