jQuery移动弹出窗口宽度因内容而异吗？

Question

Demo

jquery移动弹出窗口包含<ul>，其中每个<li>的宽度为33％。该演示显示<li>的数量会影响弹出窗口的宽度（因此会影响<li>的宽度）。 WNY？

无论<li>的数量是多少，如何保持一致的<li>尺寸？

Answer 1

确保宽度一致的一种方法是为UL元素提供设置宽度或最小宽度：

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

此外，由于您在UL中浮动列表项，您需要应用 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" */

  

以下是您更新的 FIDDLE

UPDATE：

最好设置弹出窗口的宽度并允许列表填充宽度：

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

  

更新了 FIDDLE