搜索建议下拉框怎么固定宽度不被内容撑开？

ლ秀兰提问于 2026-03-14 14:19:21 阅读 4

交互

我在做搜索框的自动补全功能，下拉建议列表用了绝对定位，但发现每个建议项的文字长度不一样，导致整个下拉框宽度会跟着最长的那项变宽，体验很奇怪。我试过给 ul 设固定 width，但又怕在小屏上溢出。

这是我现在用的样式：

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

有没有办法让下拉框宽度和输入框一致，同时内容超长时自动省略？

搜索建议

我来解答赞 1 收藏

反馈

1 条解答

极客国娟 Lv1

把 width 改成 100% 继承输入框宽度，然后给每个 li 加 text-overflow: ellipsis 就行。代码：

.search-suggestions {

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;  /* 改成100%继承输入框宽度 */

  background: white;

  border: 1px solid #ddd;

  max-height: 200px;

  overflow-y: auto;

  z-index: 1000;

}



.search-suggestions li {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

这样宽度会和输入框一致，内容太长自动显示省略号。

2026-03-14 14:20