css - 水平方向のリストとして構造化された画像が折り返されないようにするにはどうすればよいですか?

Question

バナーとして使用したい画像が並んでいます。サイズ変更時に、最後の画像をラップしたくありません。前提条件のグーグルとスタックオーバーフローでの検索を行いました。私が見つけた例は、画像ではなくテキストに関するものでした。

これが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 はそのギャップを取り除きます。負の左マージンを追加することもできますが、負のマージンが不均一に適用されるため、奇妙な効果があります (つまり、右端の画像には最大の負のマージンが必要ですが、これは左端の画像のサイズに影響します)。