ul / li 如何具有动态高度？

Question

这似乎是基本的CSS知识，所以问起来几乎是尴尬的。
但是为什么当我使用大字体时我的 ul / li 没有缩放？我正在使用 jQuery 移动设备，但我认为这不会覆盖我的 css。

我已经尝试在 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;
}

Fiddle: http://jsfiddle.net/ar2dm6h5/4/

Answer 2

line-height 属性从 li 继承到 .number。添加：

.number {
    line-height: normal;
}

ul / li 如何具有动态高度？

How can ul / li have dynamic height?

css

jquery-mobile