как разместить текст и вкладку навигации рядом друг с другом

Question

Я написал текст внутри h2, а рядом с ним хочу показать навигацию с вкладками, но табулированная навигация не размещается рядом с ней, ее движение ниже h2 как показано на следующем рисунке внутри этой серой коробке:

Ниже мой код HTML страницы:

<header> 

    <h2> 
    Corporate 
    jobpost 
    </h2> 


    <div id='tabjob'> 

     <ul> 
      <li> 
       <a class='innertab selectprofile' href='#YourJobposts'>Your Jobposts</a> 
      </li> 
      <li> 
       <a class='innertab signupprofile' href='#OtherJobposts'>Other Jobposts</a> 
      </li> 
      <li> 

       <a class='innertab signupprofile' href='#Appliedfor'>Applied for</a> 
      </li> 
     </ul> 
    </div> 
</header> 

заголовка является вещь, которая в сером цвете в image.Inside этот заголовок я хочу, чтобы показать текст, рядом с этим вкладками навигации и на угле, что кнопка

---

Ниже мой CSS для этого вкладок навигации:

#tabjob 
{ 
    padding-top:0px; 
    padding-left:10px; 
    height:0px; 

} 

.innertab 
{ 
    background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px; 
    line-height: 30px;text-align: center; 
    width: auto;float: left;font-weight: bold; 
    padding-left: 8px; 
    padding-right: 8px; 

    text-shadow: #eee 0px 0px 2px; 
} 
#tabjob ul li 
{ 
display:block; 
} 

Answer 1

Я уже разместил ответ в комментариях, просто добавив подробности ответа здесь.

DEMO is HERE

с момента h2 тега и все теги заголовка блочного элемент в HTML это взять полную ширина доступна.

так, чтобы избежать h2 тега, чтобы взять всю ширину просто добавьте {поплавок: левый} к этому элементу

Убедитесь, что вы применить этот стиль к конкретным h2 только в противном случае вашего HTML испортит. вы использовали более одного h2 тегов на странице.

HTML

<h2 class="floatTag">Corporate jobpost</h2> 
    <div id='tabjob'> 
     <ul> 
      <li> 
       <a class='innertab ' href='#YourJobposts'>Your Jobposts</a> 
       </li> 
       <li> 
       <a class='innertab ' href='#OtherJobposts'>Other Jobposts</a> 
       </li> 
       <li> 

       <a class='innertab ' href='#Appliedfor'>Applied for</a> 
       </li> 
      </ul> 
     </div> 

CSS

#tabjob 
{ 
    padding-top:0px; 
    padding-left:10px; 
    height:0px; 
} 

.innertab 
{ 
    background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px; 
    line-height: 30px;text-align: center; 
    width: auto;float: left;font-weight: bold; 
    padding-left: 8px; 
    padding-right: 8px; 

    text-shadow: #eee 0px 0px 2px; 
} 
#tabjob ul li 
{ 
display:block; 
} 

h2.floatTag{float:left;} 

Answer 2

ul и div являются блочными элементами, что означает они всегда идут ниже всех, что до них:

a<div>x</div> 

даст вам две линии. Попробуйте

a<div style='display: inline'>x</div> 

Answer 3

Использование display:inline-block и для h2 и tabjob:

h2, #tabjob { display: inline-block } 

Демо: http://dabblet.com/gist/2774902