Question

如果我将输入字段移动到页面上的其他位置，我似乎无法使我的autosuggest字段的结果与我的输入字段对齐。我想知道我是否会使用position：absolute或what？下面是我的索引页面的代码：

<input type="text" class="autosuggest"> <input type="submit" value="Search">

<div class="dropdown">
   <ul class="result"></ul>
</div>

继续我的CSS代码：

body{
 font:0.8em Verdana;
   }

.autosuggest, .dropdown, .result {
  margin:0;
  padding:0;
  border:0;
  width:250px;
}

.autosuggest {
  padding:4px;
  border:1px solid #000;
}

.result {
  width:260px;
  list-style:none;
}

.result li {
  padding:5px;
  border:1px solid #000;
  border-top:0;
  cursor: pointer;
}

.result li:hover {
  background:#333;
  color:#fff;
}

Answer 1

尝试使用相对定位的包装器包裹您的input和.dropdown，并为position:absolute添加.dropdwon。然后通过更改顶部和左侧来尝试定位.dropdown。

像那样http://jsfiddle.net/zsUuK/6/

CSS：如何使autosuggest结果与输入字段对齐

1 个答案: