css顯示：塊在相關文章中不起作用

Question

我正在嘗試修改Wordpress上下文相關帖子插件的樣式。我用這種風格：http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/ 並通過反覆試驗，取得了這一點吧：

.crp_related { 
    clear: both; 
    margin: 10px 0; 
    display: block; 
} 
.crp_related h3 { 
    margin: 0 !important; 
} 
.crp_related ul { 
    list-style: none; 
    float: left; 
    margin: 0 !important; 
    padding: 0 !important; 
    display: block; 
} 
.crp_related li, .crp_related a { 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: left; 
    display: block; 
} 
.crp_related li { 
    margin: 5px !important; 
    display: block; 
} 
.crp_related a:hover { 
    text-decoration: underline; 
} 
.crp_related .crp_title { 
    color: #000; 
    position: relative; 
    left: 15px; 
    font-size: 1.3em; 
    font-weight: bold; 
} 
.crp_related .crp_excerpt { 
    position: relative; 
    left: 15px; 
    color: #333; 
    height: inherit; 
    margin-left: 25px; 
} 
.crp_clear { 
    clear: both; 
} 

它看起來像這樣：http://nl.meetinghalfway.eu/2013/09/welkom-bij-meeting-halfway/

這看起來已經非常相似，我想要的東西，但我會就像標題之後的換行符一樣，如果可能的話，我還希望文本摘錄可點擊。

我試圖在各個地方與display: block;斷行但沒有任何效果。

Answer 1

編輯 改進我的代碼，完美地爲我工作！

要添加換行符您可以.crp_related .crp_title和.crp_related .crp_excerpt CSS改成這樣：

.crp_related .crp_title { 
    color: #000; 
    float: none; 
    font-size: 1.3em; 
    font-weight: bold; 
    left: 15px; 
    position: relative; 
    margin-bottom: 30px; /* play with this to add more room under the title */ 
} 

.crp_related .crp_excerpt { 
    color: #333; 
    height: inherit; 
    left: 15px; 
    position: relative; 
} 

將鏈接添加到excerp將意味着你必須改變頁面的HTML。你必須編輯插件的php文件。

Answer 2

我使用了你在給出的例子中找到的標記，希望它在你的插件中是一樣的。您只需要在.crp_related .crp_excerpt中添加display:block和margin-top: 30px。

.crp_related { 
 
    clear: both; 
 
    margin: 10px 0; 
 
    display: block; 
 
} 
 
.crp_related h3 { 
 
    margin: 0 !important; 
 
} 
 
.crp_related ul { 
 
    list-style: none; 
 
    float: left; 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
    display: block; 
 
} 
 
.crp_related li, 
 
.crp_related a { 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: left; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 
.crp_related li { 
 
    margin: 5px !important; 
 
    display: block; 
 
} 
 
.crp_related a:hover { 
 
    text-decoration: underline; 
 
} 
 
.crp_related .crp_title { 
 
    color: #000; 
 
    position: relative; 
 
    left: 15px; 
 
    font-size: 1.3em; 
 
    font-weight: bold; 
 
} 
 
.crp_related .crp_excerpt { 
 
    position: relative; 
 
    left: 15px; 
 
    color: #333; 
 
    height: inherit; 
 
    margin-left: 25px; 
 
    margin-top: 30px; 
 
    display: block; 
 
} 
 
.crp_clear { 
 
    clear: both; 
 
}

<div class="crp_related "> 
 
    <h3>Das könnte dir auch gefallen…</h3> 
 
    <hr> 
 
    <ul> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2014/01/15-wensen-voor-2014/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2014/01/hopes2014featured-150x150.jpg" alt="15 wensen voor 2014" title="15 wensen voor 2014" width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2014/01/15-wensen-voor-2014/" class="crp_title">15 wensen voor 2014</a><span class="crp_excerpt"> Dit nieuwe jaar zal een belangrijke zijn voor onze continent, met verkiezingen in het Europees Parlement en het economische crisis nog niet opgelost. 15 leden van het Meeting Halfway team delen hun wensen en verwachtingen voor Europa in 2014.</span> 
 
    </li> 
 
    <hr> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2013/10/groot-brittannie-of-klein-brittannie/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2013/10/20131001-Great-Britain-or-little-Britain-1-Clare-Jordan-photographer-Clare-Jordan-150x150.jpg" alt="Groot-Brittannië of klein Brittannië?" title="Groot-Brittannië of klein Brittannië?" 
 
     width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2013/10/groot-brittannie-of-klein-brittannie/" class="crp_title">Groot-Brittannië of klein Brittannië?</a><span class="crp_excerpt"> De Britten zijn berucht voor hun gebrek aan talenkennis. Volgens een gepubliceerde enquête van de British Council is 78% van de Britse bevolking niet in staat om een tweede taal te spreken.</span> 
 
    </li> 
 
    <hr> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2013/10/mijn-twee-talen/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2013/10/20130930-Bilingual-student-1-Eva-Lietavová-@Private-150x150.jpg" alt="Mijn Twee Talen" title="Mijn Twee Talen" width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2013/10/mijn-twee-talen/" class="crp_title">Mijn Twee Talen</a><span class="crp_excerpt"> Ze heeft altijd van de Franse taal gehouden. Om deze simpele reden besloot Eva zich op een tweetalige middelbare school in te schrijven. Via deze school ging ze naar de universiteit, waar ze nu Frans studeert. Zo triviaal als het nu misschien lijkt, slechts een paar jaar geleden had Eva geen idee hoe haar leven zou veranderen.</span> 
 
    </li> 
 
    <hr> 
 
    </ul> 
 
    <div class="crp_clear"></div> 
 
</div>