html - 为什么 LI 不扩展内容

Question

我有一个无序列表，在每个列表项中我有一个 div，并且包含在 div 中我有一个图像，div 正确地围绕图像扩展，但包含的 LI 不是。

以我的 fiddle 为例: 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>

我可以对 LI 做些什么来使其扩展到正确的高度和宽度，以便 div 完全包含在其中并且图像完全包含在 div 中？

提前致谢!

Answer 1

您需要从 .featuredApp 中删除 position:absolute

我还会从 .featuredApp 中删除宽度并将其放在 li 上

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

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

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