CSS: How to get thumbnails into a horizontal line?

2 Views

I’m using WordPress Popular Posts plugin in the footer of my blog and I’m having trouble styling it. I would like to have the 5 thumbnails in a horizontal line (not vertical as they are now) with the post titles under them rather than next to them. I’ve been messing with the display on the thumbnail styles but unfortunately I don’t understand what that does well enough to make it do what I want. Any help would be much appreciated! 

/*
Wordpress Popular Posts plugin stylesheet
Developed by Hector Cabrera

Use the following classes to style your popular posts list as you like.
*/

.wpp-list { /* UL element */

}

    .wpp-list li { /* LI - post container */
        overflow:auto;
        display:block;
        float:none;
        clear:both;
    }

        /* title styles */
        .wpp-post-title {
        }

        /* thumbnail styles */
        .wpp-thumbnail {
            display:inline;
            float:left;
            margin:0 5px 0 0;
            border:none;
        }

        /* excerpt styles */
        .wpp-excerpt {
        }

        /* Stats tag styles */
        .post-stats {
            font-size:9px;
            font-weight:bold;
display:inline;
        }

            .wpp-comments {
            }

            .wpp-views {
            }

            .wpp-author {
                font-style:italic;
            }

            .wpp-date {
                display:block;
                clear:right;
            }

        /* WP-PostRatings styles */
        .wpp-rating {
        }
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. use this style:

    .wpp-list li {
overflow: auto;
display: inline-block;
float: none;
clear: both;
width: 150px;
}

    enter image description here

    display:inline-block makes items to be in inline and set width of items as the width of your images.