내 요소를 동일한 수평선에 유지하려면 어떻게해야합니까?

Question

텍스트와 링크를 동일한 줄에 유지하려고합니다. 나는 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/. 모든 것을 같은 수평선에 두려면 어떻게해야합니까?

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