li元素將無法正確包裝在其容器中

我想製作每個尺寸爲200 x 200像素的水平框。我決定使用ul li。你們都很清楚我必須將float:left屬性應用於li標記以使其水平。li元素將無法正確包裝在其容器中

我的問題是，當我將float:left應用於li元素時，li中的所有內容都完全中斷其容器。我注意到了這一點，因爲我將邊框樣式附加到主容器，並且所有內容都位於主容器下方的新行中。

這裏是我的代碼

HTML：

<div class="content-box"> 
    <h3 class="box-header">Recent Files</h3> 
    <ul class="horizontal-content"> 
     <li> 
      <div class="filebox"> 
      </div> 
     </li> 
    </ul> 
</div>

和CSS：

.content-box { 
    position:relative; 
    width:800px; 
    border:1px solid #dadada; 
    margin-left:10px; 
    padding:10px; 
} 

ul.horizontal-content { 
    list-style:none outside none; 
} 

ul.horizontal-content > li { 
float:left; 
display:block; 
padding:10px; 
} 

.filebox { 
position:relative; 
padding:15px; 
width:200px; 
height:200px; 
border:1px solid #dadada; 
background-color:#ecf0f1; 
}

現在你看到我的所有代碼，請幫我找出我做錯了。

來源

2013-12-20 Wananong Kluanwong

可你http://jsfiddle.net/arunpjohny/HPfPG/1/重現問題 –

看看http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504 –

@ Praveen Jeganathan，你也可以縮進代碼。 –

你真的不需要float:left使其水平。只需添加display:inline-block和刪除float

ul.horizontal-content > li { 
    padding:10px; 
    background:grey; 
    display:inline-block 
}

DEMO

來源

2013-12-20 04:56:35 Sowmya

爲什麼使它成爲'inline-block'，只是'clear ''float' http://jsfiddle.net/HPfPG/2/ –

爲什麼使用float：當它真的沒有必要的時候。左邊是使用float使li水平，所以在這種情況下，內聯是最好的方法。 – Sowmya

http://jsbin.com/EvufAWo/1/ ?? –

地址：

ul.horizontal-content { 
    overflow: auto; 
}

來源

2013-12-20 04:58:05 Astockwell

這真的接近我想要的，但我只是希望所有四個盒子都用邊框包裝在容器中。你知道如何解決這個問題嗎？ –

這裏使用overflow:auto，這裏是Click Here

來源

2013-12-20 04:59:40

我一直在嘗試了許多演示的鏈接解決方案，但他們不會解決。我將創建的jsfiddle爲你們看到了什麼錯誤

來源

2013-12-20 06:08:55

好了，所有的問題都與明確的解決：雙方

來源

2013-12-20 06:31:22

li元素將無法正確包裝在其容器中

回答

相關問題