显示内联块无法正常工作

Question

我有一个列表，其中元素显示为内联块。

ul li element li的第一个孩子被内联，但其他li元素带有额外的空间。如下图所示。

我对这些元素的css =

<ul class="video-list">

        <li><a href="#">
            <div class="videoimg">

                    <img src="/Images/sample.png" height="150" width="150">

            </div>
        </a>
            <div class="info">

                <a href="javascript:;">name</a>
                <div>
                    Channel: <br>
                    By : 
                    <div>
                        Views : 0
                    </div>
                </div>
            </div>
        </li>
</ul>

li将是重复元素。

CSS -

.video-list {
    list-style: none;
}

    .video-list li {
        display: inline-block;
        margin: 3px;
        padding: 10px;
        position:relative;
    }
        .video-list li .info {
            bottom:0;
            background:#f5f5f5;
            padding:10px;
            height:120px;
            border:1px solid #e5e5e5;
            border-bottom-left-radius:3px;
            border-bottom-right-radius:3px;
        }

Answer 1

您需要的规则是vertical-align

.video-list li {
        display: inline-block;
        margin: 3px;
        padding: 10px;
        position:relative;
        vertical-align:top; /* Added*/
    }

Answer 2

您需要添加垂直对齐

.video-list li {
display: inline-block;
margin: 3px;
padding: 10px;
position:relative;
vertical-align:top; /* here */
}