Html 数据列表显示远离输入

我正在执行一个简单的自动完成与数据列表和输入。 问题是数据列表显示的距离输入区域很远。 我使用顺风与反应为这个项目

<div>
      <input
        type="text"
        name="search"
        placeholder="Search for products, brands"
        className="w-full p-4 text-sm rounded-lg bg-transparent border-solid border-2 border-black bg-white"
        onChange={(e) => setSearchTerm(e.target.value)}
        list="categories"
      />
      <datalist id="categories">
        {categories.map((category) => (
          <option value={category.name} />
        ))}
      </datalist>
    </div>

setSearchTerm（e.target.value）}
list=“类别”
/>
{categories.map（（categority）=>(
))}

---

更新，在登录Firefox后，我在Chrome中发现了一个bug

这里有一个解决问题的方法

---

您有CSS/样式表吗？如果是这样，我们能看到数据列表和输入的样式吗？没有样式表，我只使用Tailwind。嗯。。。这在我身上从未发生过。我当然没那么聪明，也想不出发生这种事的原因。如果这种情况持续下去，您可能会感到绝望，并编写自己的自动完成程序。我们在哪里可以看到这种情况？有链接吗？问题来自Chrome，我在这里找到了解决方案