溢出x滾動的一行中的CSS div

Question

我想要一個固定高度和內部項目在一行中的列表。如果項目的數量超過寬度，我想要一個overflow-x滾動條，以便項目不應該推到下一行。

到目前爲止，我已經與inline-block的周圍打了UL /李和浮留給div的，但他們都被推到下一行..

感謝您的幫助！

Answer 1

試試這個：

.container { 
    overflow: auto; 
    white-space:nowrap; 
    width: 500px; 
} 
.item { 
    padding: 10px; 
    border: 1px solid red; 
    display: inline-block; 
    vertical-align:top; 
    margin-right:20px; 
    white-space:normal; 
} 

運行例如：https://jsfiddle.net/3dsign/gw35yq9p/

Answer 2

而不是使用顯示：inline-block的和浮游，嘗試學習Flexbox將其其更容易，更具有令人難以置信的功能：Flexbox Tutorial

所以如果你想使用這個：

.container { 
    overflow: auto; 
    display:flex; 
    justify-content:space-around; 
} 
.item { 
    padding: 10px; 
    border: 1px solid red; 
    vertical-align:top; 
    white-space:normal; 
}