html - 如何在 block 元素的底部设置内联 block 元素的底部

Question

假设我有以下 html 和 css 代码:

.something{
  width: 200px;
}
.display-block {
  display: block;
}
.req-field{
  float: right;
  font-size: 5px;
}

<div class="something">
  <span class="display-block">First name:<span class="req-field">required</span></span></div>

如您所见，与“名字”相比，“必填”文本向上 float 。如果我想要“必需”文本也有底部触及显示 block 跨度的底部

Answer 1

您可以使用line-height 来调整高度。

.something {
    width: 200px;
}
.display-block {
    display: block;
    font-size: 18px;
}
.req-field {
    float: right;
    font-size: 9px;
    height: 20px;
    line-height: 29px;
}

<div class="something">
  <span class="display-block">First name:<span class="req-field">required</span></span></div>