<ul> <li> 上的水平滚动

Question

我想在 Facebook Messenger 中创建快速回复。您可以在下图中看到结果：

这是我使用的 .css 和 HTML：

.quick_replies {
  display: inline;
  clear: both;
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  border: solid 2px #86BB71;
}

<ul style="white-space:nowrap;margin-bottom: 10px;">
  <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">Réponse 4</li>
  <li class="quick_replies">Réponse 5</li>
  <li class="quick_replies">Réponse 6</li>
  <li class="quick_replies">Réponse 3</li>
  <li class="quick_replies">Réponse 7</li>
  <li class="quick_replies">Réponse 8</li>
</ul>

如何使用这些快速回复创建水平滚动并且不让它们放大容器 div ？

Answer 1

您需要为您的:添加宽度和overflow:auto（或overflow:scroll）ul：

ul {
  width: 100%;
  overflow: auto;
}

.quick_replies {
  display: inline-block;
  clear: both;
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  border: solid 2px #86BB71;
}

<ul style="white-space:nowrap;margin-bottom: 10px;">
  <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">Réponse 4</li>
  <li class="quick_replies">Réponse 5</li>
  <li class="quick_replies">Réponse 6</li>
  <li class="quick_replies">Réponse 3</li>
  <li class="quick_replies">Réponse 7</li>
  <li class="quick_replies">Réponse 8</li>
</ul>