Question

编辑：我只是解决它，我有一个＆＃34;行高：1.5em;＆＃34;身体线{}。抱歉，感谢所有试图帮助我的人。

我正在我的网站上为新闻系统构建表单。我只使用HTML / CSS，稍后会添加php。 This is my final result.
问题是底部的文本框。他们是3（由昵称/日期发布）。他们的位置应该更高，你可以看到here。这就像盒子里只有半个文字一样这是我的代码：

<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

由于浮动，您的所有span都是float:left而不是clear。您需要清除为span添加全部删除 -

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

CSS阻止了错误的定位

3 个答案: