0

我有一排不同的图像，我想用作横幅。调整大小后，我不希望最后一张图像换行。我已经完成了先决条件 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;                                                                                                 
}

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

4

2 回答 2

1

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

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

这是一个演示：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;
}

为了希望阻止这些讨厌的反对票，这里是该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;
}
于 2013-08-17T18:41:31.253 回答
1

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

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

基本上显示：table-cell；防止元素落在下一行。曾经！

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

代码：

.img {
display:table-cell;
}

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

于 2013-08-17T18:54:34.227 回答