CSS |使div浮動到右側並向父級添加滾動條

Question

我有一個父級Div容器，裏面有5個div。 父div是960px寬和320px高。內部元素向左浮動並具有設定的寬度。

5個項目沒有足夠的寬度/空間適合960寬的父div，所以自然會使最後一個div浮動到底部。

有沒有辦法讓它向右滑動並添加一個滾動條來水平滾動？

http://puu.sh/qiBKI/3f1d4c944a.png

Answer 1

您可以結合white-space: nowrap和display: inline-block，以防止被包裝的元素。添加overflow: scroll父級獲得滾動條。這裏有一個例子：

.parent { 
 
    overflow: scroll; 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
} 
 

 
.some-child { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
</div>

.parent { 
    width: 100%; 
    overflow: scroll; 
}