Высота элемента списка автоматически увеличивается с размером DIV внутри него

Question

У меня есть следующая наценка:

<ul data-role="listview" data-inset="true" class="stuff site-content lists"> 
     <li> 
     <div class="nearby"> 20 </div> 
     <h1> name</h1> 
     </li> 
</ul> 

css является:

.nearby{width: 85px; 
    height: auto; 
    float: left; 
    margin-right: 10px; 
    font-size: 26px; 
    text-align: center; 
    padding: 15px 0; 
    border: 2px #c1c1c1 solid; 
    background: #fafafa; 
} 
li{padding: .7em 15px; 
    display: block; 
} 

К сожалению, ДИВ не сидит хорошо посередине, поскольку она слишком высокая. Во всяком случае, элемент li может также увеличиваться по высоте, чтобы его отступы зависели от div, а не от h1?

Answer 1

Вы должны добавить следующее для его работы:

li{overflow:hidden;} 

При установке родителя перемещаемого элемента overflow:hidden; вы вынуждаете его обернуть все плавало содержание. Это очень полезный метод, и он используется много.

Answer 2

комплект float:left для ul и li обе у меня всегда есть эта проблема попробуйте