2

在我的网站中，我有一个必须用作自动完成框的文本字段。我在页面的“标题栏”中使用此代码：

Find :<input type="text" class="input2" style="margin-bottom:0px;"  id="customersearchfield">
<div id="customersearchresult" style="display:none; position:absolute; z-index:999; background:#fff; color:black;   ">

CSS：

.input2{
    display:            inline;
    margin-top:         4px;
    padding:            3px;
    border:             0px;
    width:              200px;
}

这不能按预期工作。resultdiv 垂直放置在文本字段的正下方，但不水平对齐。它只是与浏览器窗口的左侧对齐。

如何将resultdiv的左上角直接放在文本字段的左下角，使其直接出现在文本字段的下方？

4

1 回答 1

0

您已经在使用绝对定位。我假设你已经在使用 Javascript 来显示和填充customersearchresult

为什么不同时定位下拉菜单？

var inp = document.getElementById('customersearchfield');
var drop = document.getElementById('customersearchresult');

var rect = inp.getBoundingClientRect();

drop.style.left = rect.left + "px";
drop.style.top = (rect.bottom + 2) + "px";

示例：http ://codepen.io/paulroub/pen/Cvoix

于 2013-08-24T12:50:31.480 回答