修复列表中的白色 space 行

Question

我已经创建了一个无序列表来存储我的图像，但是在两个列表之间有一条细细的白色条纹。我不知道怎么会有 space 所以任何帮助都是 appreciated.Thanks 提前！

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/

Answer 2

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

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

修复列表中的白色 space 行

Fix white space line in list

css

whitespace

list

margin

html-lists

HTML

CSS