仅水平渲染

Question

我希望能够只能水平渲染 - 让我们说div s - 如果div在屏幕上运行，则显示水平滚动条。我试图模仿添加＆＃34; Lists＆＃34;在Trello，作为＆＃34;列表＆＃34;只能水平渲染。我怎么能够实现这个目标？

Answer 1

您可以将父级设置为忽略包装。孩子需要设置inline-block

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;