css - 如何防止结构为水平列表的图像换行？

Question

我有一排不同的图像，我想用作横幅。调整大小时，我不希望最后一张图片换行。我已经完成了先决条件 google 并在 stackoverflow 上搜索；我找到的示例是关于文本的，而不是图像。

这是 jsfiddle:http://jsfiddle.net/pHytx/

代码中最相关的部分可能是 CSS:

#slidebanners {                                                                                                       
    width:100%;                                                                                                       
}                                                                                                                     

#slidebanner ul{                                                                                                      
    padding: 0;                                                                                                       
    margin: 0;                                                                                                        
    overflow: hidden;                                                                                                 
}                                                                                                                     
#slidebanner li{                                                                                                      
    float: left;                                                                                                      
}                                                                                                                     

#slidebanner img{                                                                                                     
    height: 200px;                                                                                                    
}                                                                                                                     

.page-header {                                                                                                        
    font-size: 2em;                                                                                                   
    padding: .5em;                                                                                                    
    margin-top: 15px;                                                                                                 
}    

这个 solution 的问题是它没有消除图片之间的差距； float 消除了这个差距。我可以添加负左边距，但这会产生奇怪的效果，因为负边距应用不均匀(即最右边的图像需要最大的负边距，但这会影响最左边图像的大小)

Answer 1

为此你可以使用异国情调的 display:table-cell;

查看演示: http://jsbin.com/OxEPuJi/1/edit

基本显示:表格单元格；防止元素落在下一行。曾经!

而且它还强制它们彼此相邻而没有 float 。

代码:

.img {
display:table-cell;
}

我将其应用到包装器元素，该元素在我的演示中包含每个图像。