css display:block 在相关文章中不起作用

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;
}

在摘录中添加 link 意味着您必须更改页面的 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>

css display:block 在相关文章中不起作用

css display:block does not work in related articles

css

wordpress

block

display