css - 修复列表中的空白行

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或者stylus什么的进行预处理，你可以width: (1/3)*100%;

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