实现<ul><li>横向滚动，打造类Facebook Messenger快速回复组件

没问题！要打造类似Messenger的横向滚动快速回复栏，我们只需要对现有代码做几处关键调整，就能完美实现需求。下面是完整的解决方案：

完整代码示例 #

HTML #

<ul class="quick-replies-container">
  <li class="quick_replies">Réponse 1</li>
  <li class="quick_replies">Réponse 2</li>
  <li class="quick_replies">Réponse 3</li>
  <li class="quick_replies">更长的测试回复内容</li>
  <li class="quick_replies">Réponse 5</li>
</ul>

CSS #

/* 滚动容器样式 */
.quick-replies-container {
  list-style: none; /* 去掉默认的列表圆点 */
  white-space: nowrap; /* 强制列表项在一行显示 */
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
  padding: 10px 0; /* 上下内边距，避免滚动条贴边 */
  margin: 0 0 10px 0;
  /* 可选：隐藏滚动条（适配部分浏览器） */
  scrollbar-width: thin;
  scrollbar-color: #86BB71 transparent;
}

/* 快速回复按钮样式 */
.quick_replies {
  display: inline-block; /* 替代inline，更好控制间距和尺寸 */
  padding: 8px 16px; /* 调整内边距，让按钮更舒适 */
  border-radius: 30px;
  margin: 0 8px; /* 按钮之间的横向间距 */
  font-family: Helvetica, Arial, sans-serif;
  border: solid 2px #86BB71;
  background-color: #fff; /* 增加白色背景，更贴近Messenger风格 */
  cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
  transition: background-color 0.2s; /* 点击/悬停的过渡动画 */
}

.quick_replies:hover {
  background-color: #f0f8f0; /* 悬停时的背景色变化 */
}

/* 自定义滚动条（针对Chrome/Edge等webkit内核浏览器） */
.quick-replies-container::-webkit-scrollbar {
  height: 6px;
}

.quick-replies-container::-webkit-scrollbar-track {
  background: transparent;
}

.quick-replies-container::-webkit-scrollbar-thumb {
  background-color: #86BB71;
  border-radius: 3px;
}

关键调整说明 #

• 横向滚动核心：给列表容器(.quick-replies-container)设置white-space: nowrap让所有按钮保持在一行，再用overflow-x: auto实现超出宽度时的横向滚动。
• 按钮布局优化：把display: inline改成display: inline-block，这样可以更灵活地控制按钮的内外边距，避免inline元素的默认间距问题。
• 细节优化：
  • 去掉列表默认的圆点样式(list-style: none)
  • 增加按钮的悬停效果，提升交互体验
  • 自定义滚动条样式，让整体风格更统一
  • 给按钮添加白色背景，更贴近Messenger的视觉效果

这样调整后，你的快速回复栏就会像Messenger一样，在内容过多时可以横向滚动，同时保持美观的交互体验。

内容的提问来源于stack exchange，提问作者Pablo DelaNoche