為什么底部文本不貼標題（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="">
      <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

uj5u.com熱心網友回復：

您.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344699.html

標籤：html css 响应式设计

上一篇：將資訊從AJAX傳遞到控制器類

下一篇：React匯入影像不適用于CSS