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

Question

我正在尝试使文本和链接保持在同一行。 我认为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/ 。 如何将所有内容保持在同一水平线上？

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 游戏flexbox