使 HTML/CSS 项目粘贴/对齐到行的左右边缘？

Question

我想拥有

• 一个较长但不是非常长的

  <h1>

  标题，像往常一样，我希望它与页面的左边缘对齐；然后，
• 我想要一个普通的单词（所以作为第一个近似值，我把它作为

  <span>

  ）放在同一行上，但我希望它右对齐（即，它粘在页面的右边缘；所以本质上，它占据它所占用的宽度，行的其余部分由标题填充）；最后
• 下面我想要一段。比如：

<div id="dhead">
  <h1 id="htitle">Some longish title</h1>
  <span id="extra">Extra</span>
<div>

<p>
Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae 
pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros 
varius rutrum. Sed condimentum convallis dui id interdum ...
</p>

...除了上面的例子之外，标题和“额外”一词甚至不在同一行。

我尝试了以下弹性方法，如 CSS 两个彼此相邻的 div ：

#dhead {
  display: flex;
}
#extra {
  /* width: 200px; // don't want to set width of this explicitly; it should take the width of its content, the word) */
}
#htitle {
  flex: 1; /* Grow to rest of container (?) */
}

<div id="dhead">
  <h1 id="htitle">Some longish title</h1>
  <span id="extra">Extra</span>
<div>

<p>
Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae 
pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros 
varius rutrum. Sed condimentum convallis dui id interdum ...
</p>

...现在更糟了——实际上，很糟糕——因为现在标题和单词 AND 段落位于同一行（？！）

那么，如何将标题（向左）和单词（向右）对齐在同一行，并在下面有一个段落？我可以继续使用

<h1>

、

<span>

和

<p>

，还是必须用样式化的

<div>

替换它们才能实现这样的效果？

Answer 1

您只需使用

flexbox

即可达到您的目的。

#dhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#htitle {
  flex-grow: 1;
}

<div id="dhead">
  <h1 id="htitle">Some longish title</h1>
  <span id="extra">Extra</span>
</div>
<p>
Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae 
pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros 
varius rutrum. Sed condimentum convallis dui id interdum ...
</p>