jQuery UI 自动完成的样式不正确答案

【问题标题】：jQuery UI Autocomplete is not styled correctlyjQuery UI 自动完成的样式不正确
【发布时间】：2015-11-21 21:43:02
【问题描述】：

我有一个自动完成功能，但没有正确显示。之前我让你看一些画面： - 首先，宽度不对。太宽了！我想解决它而不设置宽度（如果你看到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;
}

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

【问题讨论】：

设置html { overflow: hidden }（或正文）应该解决第二个问题

标签： jquery css jquery-ui autocomplete

【解决方案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;
}

【讨论】：