html - 水平滚动

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

你需要给你的ul添加一个宽度和overflow:auto(或者overflow:scroll):

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>