2013-12-21 4 views
1

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

/* 
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 { 
     } 
+0

Предоставьте свою разметку, либо вы можете создать демо в [jsfiddle.net] (http://jsfiddle.net) –

+0

Я не знаю, что это значит? – Julie

ответ

1

использовать этот стиль:

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

enter image description here

display:inline-block делает вещи, чтобы быть в инлайн и заданной ширины элементов, как ширина изображения.

+0

безупречный! Спасибо огромное! – Julie

Смежные вопросы