css - jQuery Mobile 弹出窗口宽度因里面的内容而异？

Question

Demo

jquery 移动弹出窗口包含一个 <ul>其中每个 <li>宽 33%。该演示显示 <li> 的数量影响弹出窗口的宽度(因此是 <li> 的宽度)。怎么了？

如何保持一致<li>大小与 <li> 的数量无关？

Answer 1

确保宽度一致的一种方法是为 UL 元素指定一个设置宽度或一个最小宽度:

.dot3-list {
    display: block;
    list-style: none;
    min-width:240px;
    width: 100%;
    padding: 0;
    margin: 0;
}

此外，由于您在 UL 中 float 列表项，您需要应用 clearfix hack 因此 UL 将完全包装包含的列表项:

/* Start of "Micro clearfix" */
.dot3-list { zoom: 1; }
.dot3-list:before,
.dot3-list:after { content: ""; display: table; }
.dot3-list:after { clear: both; }
/* End of "Micro clearfix" */

Here is your updated FIDDLE

更新:

最好设置弹窗的宽度，让列表填满宽度:

.ui-popup-container {
    width: 75%;
}
.dot3-list {
    display: block;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

Updated FIDDLE