显示：table扩展div的高度。解决方案？

Question

我有html序列显示2个小节。因为在第一个div中我显示了一个内联列表，所以我想使用display:table因为它以这种方式看起来更好。问题是它扩展了div，使其更大，为20px（并将另一个div移动得更低）。

<div class="top-bar></div>
<div class="tail-bar></div>

.top-bar{       
    width: 520px;
    height: 50px;
    dispaly: table;
    background-color: #FFFFFF;  
}

编辑：我添加了一个JSFiddle http://jsfiddle.net/eCYUT/2/

这是没有display:table标记的版本

Answer 1

ul元素与div元素之间的差距实际上是与ul元素相关的边距。

要删除它，请将margin-bottom: 0px提供给ul元素的类名。

ul.stats{
    margin-bottom: 0px;
    /* other css properties */
}