Question

我有一排不同的图像，我想用作横幅。调整大小后，我不想要最后一个图像换行。我已经完成了必备的google并在stackoverflow上搜索;我发现的例子是关于文本，而不是图像。

代码中最相关的部分可能是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的问题在于它没有摆脱图片之间的差距;浮动摆脱了这个差距。我可能添加负左边距，但这有奇怪的效果，因为负边距得到不均匀应用（即最右边的图像需要最大的负边距，但这会影响最左边的图像的大小）

Answer 1

最好结合white-space: nowrap与display: inline-block结合使用，如您所关联问题的已接受答案所示。

问题就变成了如何消除li之间的差距。

以下是演示：http://jsfiddle.net/thirtydot/pHytx/4/

我去除了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>

#slidebanner ul {
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#slidebanner li {
    display: inline-block;
    vertical-align: top;
}
#slidebanner img {
    height: 200px;
    vertical-align: top;
}

希望能够阻止这些讨厌的downvotes，这是display: table-cell方法的有效实现，感谢user1721135的想法。

http://jsfiddle.net/thirtydot/pHytx/5/

#slidebanner {
    float: left;
    border: 1px solid red;
}
#slidebanner ul {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#slidebanner li {
    display: table-cell;
    vertical-align: top;
}
#slidebanner img {
    height: 200px;
    vertical-align: top;
}
.page-header {
    clear: both;
    font-size: 2em;
    padding: .5em;
    margin-top: 15px;
}

Answer 2

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

参见演示： http://jsbin.com/OxEPuJi/1/edit

基本显示：table-cell;防止元素在下一行上掉落。 EVER！

它也迫使他们在没有漂浮的情况下彼此相邻。

代码：

.img {
display:table-cell;
}

我将它应用于包装元素，该元素在我的演示中保存每个图像。

如何防止结构化为水平列表的图像被包装？

2 个答案: