CODEWITHSUNDEEP
cssjquery-mobile
Steven
Steven

Reputation: 19425

How can ul / li have dynamic height?

This seems like basic CSS knowledge, so it's almost embarrassing to ask.
But why isn't my ul / li scaling when I'm using a large font? I'm using jQuery Mobile, but I don't think that is overriding my css.

enter image description here

See my fiddle here.

I've tried using inline-block, height: 100% on my ul/li - but still get the same results.

// 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

Upvotes: 3

Views: 3953

Answers (2)

ByteHamster
ByteHamster

Reputation: 4951

The line-height attribute is inherited from li to .number. Add this:

.number {
    line-height: normal;
}

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

You have to remove line-height.

li {
    line-height: 20px;
}

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

Upvotes: 4

Related Questions