如何使我的元素保持在同一水平线上？

Question

我正在尝试让文本和 link 保持在同一行。我以为 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 显然没有那么容易。这是 Fiddle - https://jsfiddle.net/92rv0Lpa/ 。如何使所有内容保持在同一水平线上？

Answer 1

不是给 div 内联块的显示，而是给第一个标签（h3 标签）。这是一个工作片段：

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>

马特

Answer 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

How do I keep my elements on the same horizontal line?