如何放置文本和標籤導航彼此相鄰

Question

我寫裏面H2文字和旁邊的我要顯示一個標籤式導航但標籤navugation沒有被放在旁邊的話，它要低於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