水平滾動div與多個div裏面

Question

我想創建一個水平滾動div與幾個div與文本里面。問題是當我嘗試將文本放在裏面時，它與旁邊的div重疊。我怎樣才能解決這個問題，並使文本限制在divs內。

下面是一個示例代碼http://jsfiddle.net/znu36yn3/1/

CSS：

.popup { 
    background-color: #fff; 
    color:#000; 
    padding: 15px; 
    position: fixed; 
    text-align: justify; 
width:100%; 
    height:50%; 
    padding:90px; 
    padding-top: 30px; 
text-align:center; 
    overflow-x:auto; 
    white-space:nowrap; 

} 
.popup div{ background-color: #8cc63f; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    font-size: 10px; 
    line-height:1; 
    padding: 0px 5px 0px 5px; 
    width:100%; 
    word-wrap: normal; 
    height: 150px; 
    overflow:hidden;} 

.d1{ 
    height: 200px; 
    width: 100%; 
    overflow: none; 
    display: inline-block; 
} 

Answer 1

既然你父元素上使用white-space: nowrap，你需要在子元素，而不是word-wrap: normal使用white-space: normal。

Updated Example

.popup div { 
    white-space: normal; /* Added .. */ 
    background-color: #8cc63f; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    font-size: 10px; 
    line-height:1; 
    padding: 0px 5px 0px 5px; 
    width:100%; 
    height: 150px; 
    overflow:hidden; 
} 

作爲一個側面說明，font標籤已經過時 - 不使用它。