css - 仅水平渲染

Question

我希望能够渲染——比方说 divs——只能水平渲染(如果 div 超出屏幕则显示水平滚动条) .我试图模仿在 Trello 中添加“列表”的功能，因为“列表”仅水平呈现。我怎样才能做到这一点？

Answer 1

您可以将父级设置为忽略换行。 children 需要设置inline-block

.render-x-axis {
  white-space: nowrap;
}
.block {
  background-image: url('http://placehold.it/400x400');
  width: 400px;
  height: 400px;
  display: inline-block;
}

<div class="render-x-axis">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>