css - 水平溢出拒绝工作

Question

下面有一些 html/css:

    #wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    }

    .completebook2 {
    background: red;
    border: 1px solid #e4e4e4;
    float:left;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    white-space: nowrap;
    }
    .completebook3 {
    border: 1px solid #e4e4e4;
    padding: 10px;
    }
    .completebook4 {
    border: 1px solid #e4e;
    padding: 10px;
    background-color: chocolate;
    }
    .cover{
    background: green;
    }

http://codepen.io/anon/pen/WGZgzr

无论如何我都无法让水平滚动条出现。还 我能够让水平滚动条出现在早期版本的代码中，但是当我添加新节点时，水平滚动条损坏了。

completebook2 也是一个节点，几乎需要与completebook2 的内部节点一样保留

对此有什么想法吗？

谢谢， 吉姆

Answer 1

更改.completebook2:

• 删除float:left;
• 添加显示:内联 block ；

        #wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        }
        
        .completebook2 {
        background: red;
        border: 1px solid #e4e4e4;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        white-space: nowrap;
        display: inline-block;
        }
        .completebook3 {
        border: 1px solid #e4e4e4;
        padding: 10px;
        }
        .completebook4 {
        border: 1px solid #e4e;
        padding: 10px;
        background-color: chocolate;
        }
        .cover{
        background: green;
        }

  <div id="wrapper">
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
        </div>