Question

我正在尝试修改Wordpress的Contextual Related Posts插件的样式。我用过这种风格：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; }

添加指向摘录的链接意味着您必须更改页面的HTML。你必须编辑插件的php文件。

Answer 2

我使用了您在示例中找到的标记，希望它在您的插件中是相同的。您只需在display:block中添加margin-top: 30px和.crp_related .crp_excerpt。

.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在相关文章中不起作用

2 个答案: