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>