Display Recent Posts Horizontally

Using Themes
1

Hi

I am trying to get the three latest posts to display horizontally. Here is my code:

 {{ range first 3 .Pages }}

<li class="recent-posts">
     
 <a href="{{ .RelPermalink}}"><img{{ with .Params.cover }} src="/img/{{ . }}"{{ end }} alt="{{ .Title }}"></a>
      <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>

</li>
 {{ end }}

I have tried wrapping it in an li and using float: left OR display: inline to no avail, like this:

 li.recent-posts {
        display: inline !important;
        }

OR

li.recent-posts {
    float: left !important;
    }
2

This could be asked in any CSS forum… depending on the theme you are using this might already be implemented. What you seek is “inline lists” and starting from the following link you can reach your goal:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_horizontal

The problem you are having with this specific code is, that you wrap <h2> around the link. H2 is a block tag and always will lead to blocks, not inline code. Remove it and add the design (fontsize, font weight) to the list item that you need.

Hierarchically speaking listitems should never be headings.

1 Like
3

Thanks for your time. I removed the headers and added the <ul><li> structure and it did not fix it.
Also the theme doesn’t have this built in.

CSS

ul#menu li{
  display: inline;
  list-style: none;
}

HTML

<h3>LATEST POST</h3>

  {{ range first 3 .Pages }}

<ul id="menu">

      <li><a href="{{ .RelPermalink}}"><img{{ with .Params.cover }} src="/img/{{ . }}"{{ end }} alt="{{ .Title }}"></a>
      <a href="{{ .RelPermalink }}">{{ .Title }}</a></li>

</ul>
4

If the code you posted does NOT result in an inline list then some other css part is overwriting what you attempt. Please post a link to a sample page or your repo and we can look into it.

5


Sorry, here is the repo as well: https://github.com/rivrwind/grass-journal

6

I like the design… but I don’t see anything like “latest posts” on that site. All the links look nice next to each other.

1 Like
7

Sorry, one moment, I had to push it to git —


PS: Here is a Hugo site that does this very well:

Poking around on that site I found this grid CSS. I might try and work that in somehow.

https://craigmod.com/css/1140.css

Even more simple:
https://jsfiddle.net/9zGQ8/