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.

 

 

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. Required fields are marked *

More in How To

To Top