溢出隱藏不隱藏溢出，而建設滑塊

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

容器的高度隨內部元素而調整，這就是爲什麼你看到第四個元素