ul / li怎么能有动态高度？

Question

这看起来像是基本的CSS知识，因此提问几乎令人尴尬 但是当我使用大字体时，为什么不是我的ul / li缩放？我正在使用jQuery Mobile，但我认为这不会覆盖我的CSS。

See my fiddle here

我尝试在我的ul / li上使用inline-block，height: 100% - 但仍然得到相同的结果。

// HTML
<ui class="stats box-wrapper ui-corner-all">
    <li>
        <div class="number num-stores">7</div>
        <div class="">Stores</div>
    </li>
    <li>
        <div class="number num-brands">99</div>
        <div class="">Brands</div>
    </li>
</ui>

// CSS
.box-wrapper{
    display: inline-table;
    position: relative;
    border: solid 1px @supp-gray2;
    background-color: #C9DDE0;
    margin: 40px;
}

li {
    display: table-cell;
    padding: 5px 10px;
    float: left;
    text-align: center;
    line-height: 20px;
}

.number {
    font-size: 3.6em;
}
// More css over at jsFiddle

Answer 1

您必须删除line-height。

li {
    line-height: 20px;
}

小提琴：http://jsfiddle.net/ar2dm6h5/4/

Answer 2

line-height属性从li继承到.number。加上这个：

.number {
    line-height: normal;
}