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

Question

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

这是我使用的.css和HTML：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;