溢出-x不起作用的CSS

Question

我正在嘗試創建一個簡單的滾動父div。 其中子div應該水平堆疊。

slackblitz

但這是行不通的。 子div在div寬度結束后被換行。 請幫忙。

 #outerContainer { width: 100%; height: 150px; background: red; overflow: hidden; overflow-x: scroll; } .card { float: left; display: inline-block; width: 100px; height: 150px; margin-right: 10px; background: #fff; } 

 <div id="outerContainer"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> 

Answer 1

#outerContainer {
  width: 100%;
  height: 150px;
  background: red;
  overflow: hidden;
  overflow-x: scroll;
  white-space:nowrap;
}

.card {
  display: inline-block;
  width: 100px;
  height: 150px;
  margin-right: 10px;
  background: #fff;
}

Answer 2

只需刪除float:left; 從.card類添加white-space:nowrap; 在#outerContainer

 #outerContainer { width: 100%; height: 150px; background: red; overflow: hidden; overflow-x: auto; white-space: nowrap; } .card { display: inline-block; width: 100px; height: 150px; margin-right: 10px; background: #fff; } 

 <div id="outerContainer"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> 

Answer 3

 #outerContainer { width: 100%; height: 150px; background: red; overflow: hidden; overflow-x: scroll; display: flex; } .card { min-width: 100px; height: 150px; margin-right: 10px; background: #fff; } 

 <div id="outerContainer"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> 

您的card元素進入第二行。 flex可以使它容易一些。