html - 我怎样才能在同一行上同时拥有 div 和标题？

Question

我试图在同一行中同时获取 div 和标题。我怎样才能做到这一点？目前，红色 div 在文本之后的行上。

谢谢。

.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}

.block {
height:15px;
background-color: #ff5050;
}

https://jsfiddle.net/zp9wa7hf/

Answer 1

您可以使用 Flexbox你不需要在任何元素上指定固定宽度，你也可以垂直对齐 align-items: center

.underlined {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}
.block {
  height: 15px;
  flex: 1;
  background-color: #ff5050;
}
h3 {
  display: flex;
  align-items: center;
}

<h3><u class="underlined">ABOUT ME</u><div class="block"></div></h3>