html - 水平滚动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 标签已弃用 - 不要使用它。