css - 5 图片不在一条线上

Question

我有一个 900% 宽的 DIV，我试图在一行中显示 5 张图片，但第 5 张图片总是环绕，我不知道为什么？

我的 5 张图片不到 900 像素。

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>