修复列表中的空白行

Question

我创建了一个无序列表来存储我的图像，但两个列表之间有一条白色的细条纹。我不知道那里有空间，所以感谢任何帮助。谢谢你们！

HTML

   <div class="montage">
       <ul>
        <li><img src="images/filler_image.jpg"/></li>
        <li><img src="images/filler_image.jpg"/></li>
        <li><img src="images/filler_image.jpg"/></li>
        <li><img src="images/filler_image.jpg"/></li>
        <li><img src="images/filler_image.jpg"/></li>
        <li><img src="images/filler_image.jpg"/></li>
       </ul>
    </div>

CSS

 .montage {
   width:auto;
   overflow:hidden;
   position:relative;
   clear:both;
   margin:0;
   padding:0;
 }

 .montage ul {
   margin:0;
   padding:0;
 }

 .montage ul li {
   float:left;
   cursor:pointer;
   width:33.3333%;
   line-height: 0;
   margin:0;
   padding:0;
 } 

 .montage ul li img {
   width:100%;
   margin:0;
   padding:0;
   display:block;
   height:400px;
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
 }

Answer 1

最有可能的是：width:33.3333%;，因为浏览器有时会计算有点笨拙。如果你有scss或手写笔或其他东西进行预处理，你可以width: (1/3)*100%;

这是一个隔离它的jsFiddle：https://jsfiddle.net/sheriffderek/or7bczdw/

Answer 2

您可以使用弹性框。只需将包含元素设置为display: flex; flex-wrap: wrap，并将子元素（<li>）设置为flex-grow: 1;

对此的参考是： https://css-tricks.com/snippets/css/a-guide-to-flexbox/