Css 如何防止以水平列表形式构造的图像被包装？

我有一排清晰的图像，我想用它作为横幅。在调整大小时，我不希望最后一个图像被包装。我在stackoverflow上做过谷歌和搜索；我发现的例子是关于文本，而不是图像

以下是JSFIDLE：

代码中最相关的部分可能是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;                                                                                                 
}    

---

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

最好将

空白：nowrap

与

显示：内联块

结合使用，如您链接到的问题的已接受答案所示

然后，问题变成如何消除

li

s之间的间隙

下面是一个演示：

我删除了HTML中元素之间的空白

有些人不喜欢编辑他们的HTML来消除空白。我对那些人说：处理它。这是消除间隙的最简单方法

<ul>
    <li>
        <img src="media/images/slides/olympic-1.jpg" />
    </li><li>
        <img src="media/images/slides/olympic-2.jpg" />
    </li><li>
        <img src="media/images/slides/olympic-3.jpg" />
    </li><li>
        <img src="media/images/slides/olympic-4.jpg" />
    </li><li>
        <img src="media/images/slides/olympic-5.jpg" />
    </li>
</ul>

---

为了有希望地阻止这些讨厌的否决票，这里有一个

display:table cell

方法的工作实现，这要感谢user1721135的想法

#滑块{
浮动：左；
边框：1px纯红；
}
#滑触板{
显示：表格；
宽度：100%；
填充：0；
保证金：0；
列表样式类型：无；
}
#李幻灯片{
显示：表格单元格；
垂直对齐：顶部；
}
#滑块式img{
高度：200px；
垂直对齐：顶部；
}
.页眉{
明确：两者皆有；
字号：2em；
填充：.5em；
边缘顶部：15px；
}

为此，您可以使用异国情调的

显示：表格单元格

请参见演示：

基本显示：表格单元格；防止图元落在下一行上。永远

它还迫使它们彼此相邻，没有浮动

代码：

.img {
display:table-cell;
}

我将此应用于包装器元素，该元素保存演示中的每个图像。
Wow！我不知道li元素之间的空间实际上得到了渲染。有人能解释为什么会这样吗？我试着编辑我的结构，只是把img标签放在一个挨着一个的位置上，结果显示出同样的问题；每个img之间都有一个空格，只有在我删除它们之间的回车符时才能删除。这是一个非常脆弱的解决方案。@Avery:li
li
元素是内联的，这意味着它们的处理方式与文本类似。出于同样的原因，
hello world
中的单词之间有一个空格，内联块
li
元素之间也有一个空格。这也是一个合理的解决方案。您应该在答案中包含演示中的代码。在您编辑HTML以删除
li
s并将其插入例如WebKit浏览器之前，这是很好的。