如何为左浮动元素创建水平滚动区域？

Question

我希望此外<div>仅在x轴上滚动，但它不起作用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在我的屏幕上，它呈现为：

有什么问题？

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