Question

我刚刚重写了这个问题，而不是讲一个毛茸茸的狗故事。

在position : relative课程中使用z-index和ui-autocomplete，并让autocomplete()将建议框附加到默认元素，我的文字输入下方会显示我的建议并覆盖表格中显示在其下方的控件。

问题是宽度。如何从input获取宽度？目前，它占用了整个页面宽度。

这是我的CSS：

.ui-autocomplete
{
    position : relative;
    z-index : 50;
    list-style : none;
    background-color: #e0e0e0;
    border: solid 1px lightblue;
    text-align : left;
    overflow-y : scroll;
    max-height : 100px;
    margin : 0px;
    padding : 0px;
}

.ui-menu 
{
    text-decoration : none;
    white-space : nowrap;
}

li.ui-menu-item a
{
    color : gray;
    text-decoration: none;
    display : block;
    white-space : nowrap;
}

li.ui-menu-item a:hover
{
  background-color : lightgray;
}

Answer 1

人们在寻找关于CSS的明确答案，请尝试使用css-tricks.com。正是在这里，我以一种让我有信心做出改变的方式向我提出了定位和尺寸规则，知道我期望它做什么并看到它有效！

这个特殊问题的答案是宽度默认为100％。如果添加float，则宽度会调整为框的内容。

所以：

.ui-autocomplete
{
    float : left; 
    clear : both; /* make sure it doesn't pull the next line up next to it */
    position : relative;  /* z-index will not work without this */
    z-index : 50;
    list-style : none;
    background-color: #e0e0e0;
    border: solid 1px lightblue;
    text-align : left;
    overflow-y : scroll;
    max-height : 100px;
    margin : 0px; /* pull the list items over the left edge */
    padding : 0px;
}

就是这样。希望它能为你节省2天的谷歌搜索时间： - ）

jQueryUI自动完成CSS建议列表宽度

1 个答案: