如何爲左浮動元素製作水平滾動區域？

Question

我希望這個外層<div>只能在x軸上滾動，但它不起作用。

.wrapper { 
 
    width: 98%; 
 
    height: 320px; 
 
    padding-left:1%; 
 
    padding-right:1%; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
    background-color: #fff; 
 
    float:left; 
 
    position:absolute; 
 
} 
 

 
.internal { 
 
    width:250px; 
 
    height:320px; 
 
    display: inline; 
 
    background-color: wheat; 
 
    float:left; 
 
    position:static; 
 
}

<div class="wrapper"> 
 
    <div class="internal">item 1</div> 
 
    <div class="internal">item 2</div> 
 
    <div class="internal">item 3</div> 
 
    <div class="internal">item 4</div> 
 
    <div class="internal">item 5</div> 
 
    <div class="internal">item 6</div> 
 
    <div class="internal">item 7</div> 
 
</div>

在我的屏幕上，它呈現爲：

有什麼不對？

Answer 1

首先，你的代碼有點亂。你在同一個選擇器中有一堆覆蓋規則。

你需要將你的物品包裝在一個內部容器中，這個內部容器的尺寸比包裝物大。這裏是你的代碼，清理：

http://jsfiddle.net/aLysdueo/

HTML：

<div class="wrapper"> 
    <div class="container"> 
     <div class="internal">item 1</div> 
     <div class="internal">item 2</div> 
     <div class="internal">item 3</div> 
     <div class="internal">item 4</div> 
     <div class="internal">item 5</div> 
     <div class="internal">item 6</div> 
     <div class="internal">item 7</div> 
    </div> 
</div> 

CSS： 「水平滾動區域」

.wrapper { 
    width: 98%; 
    height: 320px; 
    overflow-y: hidden; 
    overflow-x: scroll; 
} 
.container { 
    width: 1500px; 
    height: 320px; 
} 

.internal { 
    float:left; 
    width:250px; 
    height:320px; 
    background-color: wheat; 
}