How To Display Posts With Thumbnails & Links Horizontally In A Row Using HTML/CSS

People often find it difficult to display blog posts with thumbnails and links horizontally in a row. Horizontal posts are mostly displayed in News & Magazine websites.

In this tutorial you will learn step-by-step to How To Display Posts With Thumbnails & Links Horizontally In A Row Using HTML/CSS.

CSS Code

<style>
#main ul
{
list-style:none;
}
#main li
{
display: inline-block !important;
overflow: hidden !important;
float: left !important;
width: 270px !important;
padding-left:16px !important;
background: none !important;
margin: 0px 10px 0 0 !important;
border: none;
padding-right: 14px !important;
}
#main .thumbnailhr img
{
width:270px !important;   /* Thumbnail Width */
height:160px !important;  /* Thumbnail Height */
}
#main .link-bodyhor h3 a
{
font-size:16px !important;
color:black !important;
}
#main .link-bodyhor h3 a:visited
{
color:black !important;
}
#main .link-bodyhor h3 a:hover
{
color:orangered !important;
}
</style>

 

HTML Code

• Replace post links and “img src” links with your links.

 

<div id=”main”>
<ul>
<li>
<a class=”thumbnailhr” href=”http://www.abc.html”><img src=”https://abc1.jpg”></a>
<div class=”link-bodyhor”>
<h3><a href=”http://www.abc.html”>Enter the title of link</a></h3>
</div>
</li>
<li>
<a class=”thumbnailhr” href=”http://www.abc2.html”><img src=”http://abc2.jpg”></a>
<div class=”link-bodyhor”>
<h3><a href=”http://www.abc2.html”>Enter the title of link</a></h3>
</div>
</li>
<li>
<a class=”thumbnailhr” href=”http://www.abc3.html”><img src=”http://abc3.jpg”></a>
<div class=”link-bodyhor”>
<h3><a href=”http://www.abc3.html”>Enter the title of link</a></h3>
</div>
</li>
</ul>
</div>

• If you like this post then don’t forget to share with people. Share your feedback in the comments section below.