帶有小寬度和水平滾動條的塊

我想在塊中填充大量照片。網頁的寬度總是太小，所以我想添加一個水平滾動。帶有小寬度和水平滾動條的塊

HTML

<div class="wrapper"> 
    <div class="photos"> 
     <ul> 
      <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li> 
      <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li> 
      <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li> 
      <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li> 
     </ul> 
    </div> 
</div>

CSS

.wrapper { 
    width: 80%; 
    margin: 10px auto; 
} 

.wrapper { 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

ul, li { 
    margin: 0; 
    padding: 0; 
} 

.wrapper ul { 
    width: 10000px; 
} 

ul li { 
    list-style: none; 
    float: left; 
}

它工作正常，在Chrome中。

但它在Firefox中並不能正常工作，因爲它精靈會在照片後顯示10000px塊有大量可用空間。

來源

2013-04-18 vlad

'列表樣式類型：無;'可能會解決它。 – 2013-04-18 12:05:24

把你的CSS和代碼放在這裏，請，所以希望答案是可重用的，所以無鏈接 – wazaminator

@Allendar有什麼'list-style-type'做到這一點？ –

嘗試更換CSS有以下幾點：

.wrapper ul { 
    white-space: nowrap; 
} 

ul li { 
    list-style: none; 
    display: inline-block; 
}

http://jsfiddle.net/49REZ/4/

來源

2013-04-18 13:02:04 sphair

謝謝！我在想'display：inline-block;'而不是'float：left;'，但是這些圖片之間的距離看起來很糟糕。有沒有一種方法可以避免元素之間的註釋「<！ - 」？ – vlad

還有一種方法是將font-size設置爲0.退房http://jsfiddle.net/49REZ/7/ – sphair

-1

嘗試把你的10 000px對另一位母親部件，如股利，或直接在身體

來源

2013-04-18 12:07:11 wazaminator

這並沒有提供一個問題的答案。要批評或要求作者澄清，請在其帖子下方留言。 – valex

@wazaminator如果我添加另一個包裝並移動該屬性 - 它的工作原理是一樣的。如果我把這個屬性放到DOM上 - 滾輪根本不起作用。 – vlad

@valex實際上，我做了那麼，我不知道，如果有人可以投下這個答案，所以它會得到答案的底部... – wazaminator

你可以試試這個：
HTML：

<ul class="images"> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
    <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li> 
</ul>

CSS：

ul.images { 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    width: 500px; 
    overflow-x: auto; 
    background-color: #ddd; 
    } 
    ul.images li { 
    display: inline; 
    width: 150px; 
    height: 150px; 
    }

jsfiddle

來源

2013-04-18 13:19:09 navand

帶有小寬度和水平滾動條的塊

回答

相關問題