带有小宽度和水平滚动条的块

我想在块中填充大量照片。网页的宽度总是太小，所以我想添加一个水平滚动。带有小宽度和水平滚动条的块

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

带有小宽度和水平滚动条的块

回答

相关问题