Горизонтальная Переполнение отказывается работать

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

Любые идеи по этому вопросу?

Спасибо, Jim

Answer 1

Изменение .completebook2:

• удалить float:left;
• добавить display: inline-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>