如何为左浮动元素制作水平滚动区域？

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