CSS:如何使自动建议结果与输入字段对齐

Question

如果我将我的输入字段移动到页面上的其他位置，我似乎无法使我的自动建议字段的结果与我的输入字段对齐。我想知道我是否会使用 position: absolute 还是什么？这是我的索引页面的代码:

<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/