Connect with us

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

How To Display Posts With Thumbnails & Links Horizontally

How To

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.

 

Also Read:

 

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, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

Your email address will not be published.

More in How To

To Top