内联列表元素之间的不规则空格

Question

jsfiddle link中有一些不规则的空白。它必须是逐行的，每张照片后必须立即拍照。我想知道它为什么会发生以及如何解决它。

HTML：

#content{
    width: 90%;
  margin: auto;

}
ul {
    list-style-type: none;
}
#videos{
    overflow: hidden;
    position: relative;
  padding-left: 10px;

}
#videos-wrapper{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #101010;
    border-color: #222;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    clear: both;
    padding-bottom: 8px;
    position: relative;
}
#videos-ul{
        left: 0;
    margin-left: 2px;
    margin-top: 6px;
    position: relative;
}
ul {
    list-style-type: none;
}
ul li.single-video-li {
    vertical-align: top;
    display: inline-block;
}
.single-video-block{
    width: 35px;
    margin-right: 10px;
    position: relative;
    height: 35px;

}
.video-thumb{
    width: 30px;
    height: 30px;
}

CSS：

    <dependency>
        <groupId>com.sun.jersey</groupId>
        <artifactId>jersey-client</artifactId>
        <version>1.9</version>
        <scope>provided</scope>
    </dependency>

结果：

Answer 1

在某些<div class="single-video-block">内，您有多个<li>个 http://jsfiddle.net/s8d77r2z/1/

Answer 2

您在li元素中包含两个div。请参阅此更新Fiddle

Answer 3

#videos-ul {
    left: 0;
    margin-left: 2px;
    margin-top: 6px;
    position: relative;
    font-size:0; /* <======   to get rid of white spaces when inline-block element are present as child */
}

让您重复li类似下面的

<li class="single-video-li">
    <div class="single-video-block">
        <a class="img" href="#">
            <img class="video-thumb"src="http://tr.nociicon.com/public/upload/fdthum/2014/10/10/face_smile.png" />
        </a>    
    </div>
</li>

DEMO