要素を同じ水平線に維持するにはどうすればよいですか？

私はテキストとリンクを同じ行に残そうとしています。私はhtis CSSは以下のHTML要素を同じ水平線に維持するにはどうすればよいですか？

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

上のトリックに

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

を行うだろうと思ったが、何も明らかにHTMLを持つことは簡単だん。フィドルはhttps://jsfiddle.net/92rv0Lpa/です。どのように私はすべて同じ水平線上に保つのですか？

2016-12-14 Anonymous

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>

マット

2016-12-14 22:38:23

正解だけでメッセージを追加するための細かい、必要性を全くしません:) **タグがh3はさ、ところでH4ない** –

を理解するのに役立ちます@GCyrillusええ、私はちょうど正しい答えまたはupvotingとしてそれをマークせずに答えを実行する人々を嫌っている：P –

@MatthewBergwall - それはしばらくの間起こる;私はそれがイライラしていることに同意する。しかし、アップフォートや回答の受け入れは、一般的にここでは悪い形とみなされます。 – Krease

-1

私はあなたのコードと私はあなたが望んで達成しているこの方法を少し変更したが、あなたはどのようにについての詳細を知りたい場合レイアウトを開発し、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>

彼のゲームは、あなたがフレキシボックスgame flexbox

2016-12-14 22:41:27 qleoz12

ディスプレイ：相対; ??あなたはディスプレイを意味しましたか？？ –

答えて