我有一些ul li高度問題

Question

當檢查我的元素時，我注意到我的第一個li的高度非常低。

我想在選擇「城市（2）」後爲整個li添加背景。

背景填充只有城市（2）紐約的一半。我嘗試了沒有浮動，但後來我不能讓他們排隊。

我添加了2張照片。一個我漂浮，一個沒有。

<ul class="specs"> 
     <li> 
      <div class="trigger">› City (2)</div> 
      <div class="cityByLocation"> 
       <ul> 
        <li class="cityInfo"> 
         <div class="cityName" style="float: left;"> 
          › New York 
         </div> 
         <div class="cityDistance" style="float: left;"> 
          430 miles 
         </div> 
         <div class="btn-take"></div> 
        </li> 
        <li class="cityInfo"> 
         <div class="cityName" style="float: left;"> 
          › Chicago 
         </div> 
         <div class="cityDistance" style="float: left;"> 
          430 miles 
         </div> 
         <div class="btn-take"></div> 
        </li> 
       </ul> 
      </div> 
     </li> 
<ul> 

CSS：

.cityName{ 
    float: left; 
    width: 45%; 
} 


.cityDistance { 
    float: left; 
    width: 20%; 
} 

.specs { 

    padding: 0; 
} 

.specs li { 
    padding: 0; 
    padding-top: 10px; 

    list-style: none; 
} 

.specs ul { 
    list-style: none; 
    padding: 0; 
} 

Answer 1

你需要清除花車埃裏克說。實現這一最簡單的方法是應用overflow: hidden到容器，所以：

.cityByLocation { 
    overflow: hidden; 
} 

http://jsfiddle.net/a3GLG/

Answer 2

我認爲這將解決您的問題。

當浮動元素位於容器框內時，該問題發生，該元素不會自動強制將容器的高度調整爲浮動元素。當一個元素被浮動時，它的父元素不再包含它，因爲浮動元素被從流中移除。

您可以使用兩種方法來解決這個問題：

{明確：既}或.clearfix

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

source

Answer 3

您也可以通過設置overflow: hidden到li元素修復它。它會清除並自動計算高度。

- 更新 -

感謝@mickmackusa

https://jsfiddle.net/e94pzbbn/1/