水平溢出拒绝工作

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是一个节点，几乎需要与完整书2的内部节点保持一致

有关于此的任何想法吗？

谢谢， 吉姆

Answer 1

更改.completebook2：

• 删除float:left;
• 添加display: inline-block;

＆＃13;

＆＃13;

        #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;
        }

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;