css - 溢出隐藏在构建滑块时不隐藏溢出

Question

我正在尝试创建一个可以左右移动的滑块。我只想显示 3 张幻灯片，所以我将容器的宽度设置为每个内部幻灯片的宽度 * 3 并设置overflow:hidden. 那么第四张幻灯片不应该被隐藏吗？然后稍后我可以为容器设置动画，使其具有 -110 像素的边距，因此幻灯片 2-4 显示。

http://jsbin.com/welcome/27336/edit

HTML：

<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">shouldn't be here</div>
</div>

CSS：

.container { width: 330px; overflow:hidden; background:#e6e6e6; }
.inner { width: 110px; background: orange; float:left; }

它是如何呈现的：

Answer 1

如何设置元素的高度：

.container { 
    width: 330px; 
    overflow:hidden; 
    background:#e6e6e6; 
    height:20px 
}

.inner { 
    width: 110px; 
    background: orange; 
    float:left; 
    height: 20px;
}

容器的高度随内部元素调整，这就是你看到第四个元素的原因