5行にない画像

Question

DIVの幅が900％ですが、5枚の画像を1行に表示しようとしていますが、5枚目は常に折り返してしまい、なぜうまくいかないのですか？

私は5枚の画像で900pxをかなり下回っています。

ul{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
li{ 
 
    margin:0px; 
 
    padding:0px; 
 
    list-style:none; 
 
} 
 

 
.photo-preview{ 
 
    width:178px; 
 
    margin:0px; 
 
    display:inline-block; 
 
    text-align:center; 
 
} 
 

 
.bottom-row{ 
 
    width:900px; 
 
}

<div class="bottom-row"> 
 
    <ul> 
 
     <li class="photo-preview"><img src="photo/2.JPG"></li> 
 
     <li class="photo-preview"><img src="photo/2.JPG"></li> 
 
     <li class="photo-preview"><img src="photo/2.JPG"></li> 
 
     <li class="photo-preview"><img src="photo/2.JPG"></li> 
 
     <li class="photo-preview"><img src="photo/2.JPG"></li>        
 
    </ul> 
 
</div>

Answer 1

ほとんどのブラウザはインラインリスト項目の間にスペースを少し追加します。あなたは、この奇抜なフォーマットのハックを使用して、その出来事を止めることができます。それがあなたのニーズに合っていれば、それらを左に浮かべることもできます。

<div class="bottom-row"> 
    <ul> 
    <li class="photo-preview"><img src="photo/2.JPG"></li><li class="photo-preview"> 
    <img src="photo/2.JPG"></li><li class="photo-preview"> 
    <img src="photo/2.JPG"></li><li class="photo-preview"> 
    <img src="photo/2.JPG"></li><li class="photo-preview"> 
    <img src="photo/2.JPG"></li>        
    </ul> 
</div> 

Answer 2

ここに行ってください！
@WizardCoderと同じように、画像間には常に小さな間隔がありますが、-1pxで固定されます。

EDIT：あなたがJSFiddleに投稿したコードと正確に一致するように質問を調整しました。とにかく、

1. あなたはli項目にごdisplay: inlineを持っている必要があります。
2. imgにはクラスphoto-previewが、liにはではないが必要です。 `` 900パーセント広い

ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 

 
.photo-preview { 
 
    width: 178px; 
 
    margin: -1px; 
 
    text-align: center; 
 
} 
 

 
.bottom-row { 
 
    width: 900px; 
 
}

<div class="bottom-row"> 
 
    <ul> 
 
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li> 
 
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li> 
 
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li> 
 
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li> 
 
    <li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li> 
 
    </ul> 
 
</div>