爲什麼LI沒有擴展內容

Question

我有一個無序列表，並且在每個列表項中我有一個div，並且包含在div中我有一個圖像，div正確地在圖像周圍展開，但是包含的LI不是。

見我的小提琴爲例： http://jsfiddle.net/caseylmanus/VL4HX/

<div data-role="page" id="p1"> 
    <div data-role="header"> 
    <h1>Header</h1> 
</div> 
<div data-role="content" data-theme='a'> 
    <div id="mainContainer"> 
     <div id="featuredApps"> 
      <ul> 
       <li style="border:1px solid red;"> 
        <div class="featuredApp"> 
         <img style="width:100%" src="http://www.marketcircle.com/blog/wp-content/uploads/app-feature-1.png" /> 
        </div> 
       </li>     
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="footer" data-position='fixed'> 
    <h4>Footer</h4> 

</div> 

我能做些什麼給李，使其擴大到合適的高度和寬度，以便在div是在它完全包含和圖像完全包含在div中？

在此先感謝！

Answer 1

您需要刪除的位置：從.featuredApp

絕對

我也從.featuredApp去除寬度，並將其放置在李

li { 
    list-style-type:none; 
    border:1px solid #c00; 
    width:33.33%; 
} 
.featuredApp { 

} 
.featuredApp img { 
    border-radius:9px; 
} 

http://jsfiddle.net/jamesking/VL4HX/20/