jQuery UI 自动完成样式不正确

Question

我有自动完成功能，但显示不正确。我之前让你看一些屏幕:- 首先，宽度不对。太宽了!我想在不设置宽度的情况下解决它(如果您看到 example on jquery-ui site ，则未设置宽度)

• 其次，如果我的列表太长，它会移到页脚上方并在页脚下方留下一个大的空白区域(黑色可以看到页脚，红色是自动完成菜单，白色是红色菜单下的当我有一个长列表时出现的空白区域):

也许第二个请求没有意义，因为它工作正常，但我认为将页脚放在菜单下方会更好。

这里是我使用的 CSS:

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;

}
.ui-menu .ui-menu {
    position: absolute;
}
.ui-menu .ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px .4em;
    cursor: pointer;
    min-height: 0; /* support: IE7 
    /* support: IE10, see #8844 */
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-autocomplete {
   /* max-height: 200px;*/
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
    /*max-width: 173px;*/
        background-color: red;
        border: 1px solid #dddddd;
}

任何人都可以至少在第一次请求时帮助我吗？谢谢

Answer 1

用这个 css 解决了

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    background-color:#fff;
    border: 1px solid #aaaaaa;
    max-height: 200px;

    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}