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:

 

Click to comment

Leave a Reply

Your email address will not be published.

More in How To

Advertisement
Advertisement
Best Online Trendy Money Making Skills
Get Namecheap Shared Hosting With Free Domain
Download Cheap Website Themes
To Top