水平顯示圖像與固定框與水平溢出

Question

我有一個高度爲500px，寬度爲200px的div。裏面是一堆左側浮動的圖像，寬度爲180px，高度爲500px。左右兩邊填充10px，這意味着div會在頁面加載中顯示一個圖像。

我想這個水平滾動，垂直滾動應該隱藏。因爲我在div上設置了一個固定寬度，所以float看起來並沒有將圖像放在彼此的旁邊，而是仍然在彼此之下。

如何強制圖像顯示在彼此旁邊？ 如何實現水平滾動，是否需要css3支持？

Answer 1

嘗試這樣的事情

#outer { 
    width:500px; 
    height:200px; 
    position:relative; 
    overflow:scroll; 
    } 

    #outer ul { 
    display:block; 
    width:1000px; 
    } 
    #outer ul li { 
    display:block; 
    float:left; 
    } 
    img{ 
    height:180px; 
    width:480px; 
    padding:10px; 

    } 

    <div id="outer"> 

     <ul> 
     <li><img href="http://lechart.dk/wp-content/uploads/2009/05/nerd.jpg" /></li> 
     <li><img href="http://mynotetakingnerd.files.wordpress.com/2009/07/note-taking-nerd.jpg" /></li> 
     </ul> 

    </div> 

工作實例http://jsbin.com/ineya4/2/edit

Answer 2

您需要在您的包含分區使用overflow-x: scroll;。

div.container {overflow-x: scroll; overflow-y:hidden; width: 100px; height:500px;} 
div.image {width:100px; height:500px; float:left;background:#890;} 

<div class="container"> 
    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 
</div>