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.
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.

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, creating TikToks(@iammeerbasit), watching movies, is a passionate cricketer, creative writer, and a GSD lover.
