如何将元素保持在同一水平线上？答案

【问题标题】：How do I keep my elements on the same horizontal line?如何将元素保持在同一水平线上？
【发布时间】：2016-12-14 22:33:43
【问题描述】：

我试图让文本和链接保持在同一行。我认为 htis CSS 可以解决问题

#scenario-title {
    display: inline-block;
}

在以下 HTML 中

<div id="scenario-title">
<h3>My Scenario</h3> ( <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a> ) 
</div>

但显然，使用 HTML 并没有那么容易。这是小提琴——https://jsfiddle.net/92rv0Lpa/。如何将所有内容保持在同一水平线上？

【问题讨论】：

【解决方案1】：

不要给 div 显示 inline-block，而是给第一个标签（h3 标签）。这是一个有效的 sn-p：

h3 {
  display: inline-block;
  )

<div id="scenario-title">
<h3>My Scenario</h3> ( <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a> ) 
</div>

马特

【讨论】：

【解决方案2】：

我对你的代码做了一些修改，这样我就达到了你想要的效果，但是如果你想更多地了解如何开发布局和提高你的 css 定位知识，学习 flexbox 非常有用。

#scenario-title {
    display: inline;
}
#scenario-title span, a
{
  display:relative;
}

<div id="scenario-title">
<span>My Scenario</span> <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a> 
</div>

他的游戏可以帮助你理解 flexbox game flexbox

【讨论】：