CSS阻止錯誤定位

Question

編輯：我只是解決它，我有一個“行高：1.5em；” 正文{}。 對不起，謝謝您，每個嘗試幫助我的人。

我正在網站上建立新聞系統表單。 我僅使用HTML / CSS，以后會添加php。 這是我的最終結果。
問題是底部的文本框。 他們是3歲（按/昵稱/日期發布）。 他們的位置應該更高，您可以在這里看到。 就像框中只有一半的文字。
這是我的代碼：

<div class="news">
  <img src="img/Facebook.png" class="news-picture" alt="test" />
  <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a>
  <span class="postedby">Posted by &nbsp </span>
  <span class="nickname"><a href="#">Sunata</a> &nbsp </span>
  <span class="date">October 6, 2015</span>
</div>

.news-picture {
  width: 45px;
  height: 45px;
  margin: 0px 12px 0px 0px;
  border-radius: 3px;
  float: left;
}
.news-title:link,
:visited {
  color: #0084B4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 0px;
}
.news {
  font-family: Lato, sans-serif;
  height: 45px;
  clear: both;
  margin-bottom: 10px;
}
.news span {
  display: block;
  max-height: 14px;
  float: left;
  vertical-align: top;
}
.news .postedby {
  font-size: 14px;
  color: grey;
}
.news .nickname {
  color: #0084B4;
  font-size: 14px;
}
.news .date {
  font-size: 14px;
  color: black;
}

Answer 1

造成此問題的原因是文本可能具有默認的line-height 。

嘗試給出一個自定義的line-height ，例如： line-height:14px 。 （試一下這個數字以使其具有您想要的方式）

Answer 2

由於float，您的所有span都是float:left而不是clear 。 您需要清除添加全部刪除跨度-

CSS-

.news-picture {
  width: 45px;
  height: 45px;
  margin: 0px 12px 0px 0px;
  border-radius: 3px;
  float: left;
}
.news-title:link,
:visited {
  color: #0084B4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 0px;
}
.news {
  font-family: Lato, sans-serif;
  height: 45px;
  clear: both;
  margin-bottom: 10px;
}
/*.news span {
  display: block;
  max-height: 14px;
  float: left;
  vertical-align: top;
}*/
.news .postedby {
  font-size: 14px;
  color: grey;
}
.news .nickname {
  color: #0084B4;
  font-size: 14px;
}
.news .date {
  font-size: 14px;
  color: black;
}
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}

HTML-

<div class="news">
  <img src="img/Facebook.png" class="news-picture" alt="test" />
  <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a>
  <div class="clearfix">
      <span class="postedby">Posted by &nbsp </span>
      <span class="nickname"><a href="#">Sunata</a> &nbsp </span>
      <span class="date">October 6, 2015</span>
  </div>
</div>

希望對您有幫助。

Answer 3

您添加最大高度限制

.news span {
  display: block;
  **max-height: 14px;**
  float: left;
  vertical-align: top;
}