CSS：如何將縮略圖變成水平線？

我在我的blog的頁腳中使用了Wordpress熱門帖子插件，我在設計時遇到了麻煩。我想讓這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 { 
     }

來源

2013-12-21 Julie

提供您的標記，或者您可以在[jsfiddle.net]（http://jsfiddle.net） –

中產生演示我不知道這意味着什麼？ – Julie

使用這種風格：

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

enter image description here

display:inline-block使項目成爲內聯和項目，如圖片的寬度設置寬度。

來源

2013-12-21 19:26:48

完美！非常感謝！ – Julie

CSS：如何將縮略圖變成水平線？

回答

相關問題