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

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