Я использую плагин Wordpress Popular Posts в нижнем колонтитуле моего блога, и у меня возникли проблемы с его стилизацией . Я хотел бы, чтобы 5 миниатюр располагались в горизонтальной строке (а не вертикальной, как сейчас) с заголовками постов под ними, а не рядом с ними. Я возился с отображением стилей эскизов, но, к сожалению, я не понимаю, что это делает достаточно хорошо, чтобы заставить его делать то, что я хочу. Любая помощь приветствуется!

/*
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 {
        }
1
Julie 21 Дек 2013 в 23:19
Предоставьте свою разметку либо вы можете создать демонстрацию на jsfiddle.net
 – 
Prasanth K C
21 Дек 2013 в 23:23
Я не знаю, что это значит?
 – 
Julie
21 Дек 2013 в 23:24

1 ответ

Лучший ответ

Используйте этот стиль:

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

enter image description here

display:inline-block делает элементы встроенными и устанавливает ширину элементов в соответствии с шириной ваших изображений.

1
Mohsen Safari 21 Дек 2013 в 23:26
Идеально! Большое спасибо!
 – 
Julie
21 Дек 2013 в 23:33