I am facing an issue with my list elements being displayed as inline-block.
The first child of the ul li element is inlined, but the other li elements are appearing with extra space. This can be seen in the image below:
Here is the CSS for these elements:
<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 is a repetitive element.
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;
}