内部有多个div的水平滚动div

Question

我正在尝试创建一个水平滚动div，里面有几个带文本的div。问题是当我尝试将文本放入其中时，它与旁边的div重叠。我该如何解决这个问题并将文本限制在div中。

以下是示例代码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，因此您需要在子元素而不是white-space: normal上使用word-wrap: 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标记 - 请勿使用它。