reactjs自动建议列表与输入分离

Question

我创建了一个自动提示使用react-autosuggest，现在我正在尝试设计布局。我从example那里得到了一个CSS，看来效果很好。

当我将此CSS复制到我的项目中时，建议列表与自动建议的输入完全分离，如下图所示：

在示例中，我也尝试移动div，但列表紧随输入（应该如此）

这是我尝试使用的Codepen中的CSS：

ssh

Answer 1

我认为此CSS仅适用于示例中使用的沙箱。特别是

.react-autosuggest__suggestions-container {
  position: absolute;
  top: 51px;

这意味着，建议容器始终从页面顶部开始显示51px。由于您页面上的其他内容，输入可能没有通过position: absolute属性，因此无法通过输入。

我不知道您使用的是网格系统还是其他方法来管理网站上元素的位置？您可以考虑使用它，而不用px来定义位置。

Answer 2

尝试添加此

.react-autosuggest__suggestions-container--open {
    display: block;
    position: absolute;
    top: 51px;
    width: 100%;
    border: 1px solid #aaa;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
    max-height: 300px;
    overflow-y: auto;
}