Question

这是我试图设计的一些生成的HTML的片段。为什么日期与顶部对齐但h3内的链接不对应？

使用开发工具我可以看到链接与h3垂直居中对齐，但我无法以任何方式改变它，我尝试使用vertical-align或调整高度。

article {
  width: 400px;
}
article .date_posted {
  float: right;
  font-size: 12px;
}
article div.thumbnail {
  margin-right: 10px;
  width: 100px;
  height: 75px;
  float: left;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
  vertical-align: text-top;
}
article div.title h3 {
  display: inline;
}
article div.title h3 a {
  font-size: 14px;
  font-family: Lato, sans-serif;
  font-weight: 900;
  color: red;
}

article:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<article>
  <div class="uposts-part thumbnail" data-resize="1">
    <img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
  </div>
  <div class="uposts-part date_posted">
    <span class="date">23</span>, <span class="time">October</span></div>
  <div class="uposts-part title">
    <h3><a href="http://site3.wpmu-subdomain.dev/2015/10/23/dignissimos-deserunt-fugiat-at/" title="Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f  sd fsd d">Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f  sd fsd d</a></h3>
  </div>
</article>

JS小提琴：https://jsfiddle.net/xdfc8vnm/

Answer 1

article div.title {
  float: left;
  width: 233px;
  line-height: 1
}
article div .title h3 {
  display: inline;
  margin: 0;
}
article div.title h3 a {
  font-size: 14px;
  font-family: Lato, sans-serif;
  font-weight: 900;
  color: red;
  display: block;
}
article .date_posted {
  float: right;
  font-size: 12px;
  line-height: 1;
}

Answer 2

对于您的班级：文章.date_posted您需要设置在帖子标题上使用的相同字体系列，字体大小和字体粗细。所以它应该是这样的：

article .date_posted {
   float: right;
   font-size: 14px; /* from 12px changed to 14px */
   text-decoration: underline; /* this line added */
   font-family: Lato, sans-serif; /* this line added */
   font-weight: 900; /* this line added */
}

以下是一个示例：https://jsfiddle.net/LddvoLaL/2/

为什么标题和日期不排队？

2 个答案: