时间戳

首页 > 解决方案 > 为什么底部文本不粘在标题上（css）

html - 为什么底部文本不粘在标题上（css）

问题描述

问题：.parc_ned 不坚持 .parc_name

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_ned {
  font-size: 12px;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <span class="parc_name">Lorem ipsum</span>
  <span class="parc_ned">Lorem ipsum</span>
</div>

结果如下： https ://media.discordapp.net/attachments/776497290390143076/904991557013356594/Screenshot_20211102_091141.jpg

标签： htmlcssresponsive-design

解决方案

.parc_name您通过设置与顶部对齐，vertical-align:top但您缺少相同的样式，.parc_ned因此它不会与顶部对齐。

通过添加vertical-align:top到.parc_ned选择器，它移动到顶部。我还在两个选择器中添加了匹配line-height和display:inline-block，以使元素内的文本彼此居中。

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_ned {
  vertical-align: top;
  font-size: 12px;
  line-height: 26px;
  display: inline-block;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
  line-height: 26px;
  display: inline-block;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <span class="parc_name">Lorem ipsum</span>
  <span class="parc_ned">Lorem ipsum</span>
</div>

如果您不希望它位于顶部但“粘”在名称的左侧，则必须添加另一个 div：

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_content {
  display: inline-block;
  vertical-align: top;
}

.parc_ned {
  font-size: 12px;
  display: block;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
  display: block;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <div class="parc_content">
    <span class="parc_name">Lorem ipsum</span>
    <span class="parc_ned">Lorem ipsum</span>
  </div>
</div>

推荐阅读