如何在块元素的底部设置内联块元素的底部

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>

正如您所看到的那样，“必填”文字与“名字”相比是浮动的。如果我想要'必需'文本也有底部触摸显示块跨度的底部

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>