對齊h2標題旁邊的鏈接

真的很簡單的問題，我如何強制鏈接與h2標題內聯顯示？我有以下代碼：http://jsfiddle.net/jezzipin/6DpPX/，我只希望'返回頂部'鏈接與「社交媒體」標題內聯，但我嘗試的所有內容似乎都不起作用。甚至使用跨度。對齊h2標題旁邊的鏈接

任何幫助將不勝感激。

jme1988

N.B.只是要清楚，這是我後的效果：

enter image description here

來源

2012-12-12 jezzipin

應用以下樣式：

.page_title{ 
    font-size:18px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-weight:400; 
    padding-left:16PX; 
    /*color:#053452; Dark Blue*/ 
    color: #729ABD; 
    float:left; //Added float 
} 

.b2t_link{ 
    float: right; 
    margin-left: 794px; //Reduced margin by width of page-title 
    font-family: 'FamiliarProBold',Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    color: #729ABD;  
} 


.two_col_textAndImage_text{ 
    width: 720px; 
    font-size: 11px; 
    display: block; 
    float: left; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 10px; 
    min-height: 300px;  
} 

#main-content{ 
    clear:both; 
}

然後在HTML包的圖像和文字在div id爲main-content。

 <div id="main-content"> 
     <div class="two_col_textAndImage_text"> 
      <h2 class="item_title_no_image">Social Media Integrations</h2> 
      <p class="item_text_no_image"> 
       Social Media is fast becoming a channel for advertising, promoting and applying for vacancies. Some organisations have fully embraced this within their recruitment strategies whilst others have not yet or do not wish to adopt this trend. Whatever the view of your own organisation's recruitment channels, ATS2go has been designed to integrate seamlessly with social media. <br/><br/> 
       Social Media buttons, such as Facebook, Twitter and LinkedIn can be embedded within you vacancy postings enabling visitors to your site to forward a link to their friends and contacts about your vacancies. In addition, ATS2go includes automative "Job Tweets" for your vacancies which include a link back to your recruitment page; people simply click on the link within the Tweet and can then find out more about the role and hopefully submit their application immediately - simple, easy and free! <br/><br/> 
      </p> 
     </div> 
     <div class="two_col_textAndImage_image"> 
      <img/src="https://text-development.ats2go.com/img/content_images/social-media.jpg" width="250px"/> 
     </div> 
    </div>

例子：http://jsfiddle.net/6DpPX/8/

來源

2012-12-12 09:54:30

這是錯誤的，因爲它推動了網頁的圖像。 – jezzipin

我編輯了上面的css，使其正確。 – jezzipin

@ jme1988好，我沒有看到，因爲小提琴在滾動。我更新瞭解決方案並小提琴。順便說一下，'two_col_textAndImage_image' div有一個開放式結束標記。 –

你可以把你的H2裏面的鏈接。

http://jsfiddle.net/lollero/49VNH/1

另一種觀點：http://jsfiddle.net/lollero/49VNH/1/show

HTML：

<h2 class="page_title"> 
    Social Media 
    <a href="#top" class="b2t_link">Back to top</a> 
</h2>

CSS：

.b2t_link{ 
    float: right; 
}

來源

2012-12-12 09:55:18 Joonas

添加這個CSS

.b2t_link{ 
float:right; 
    margin-left:0; 
} 
.page_title{ 
display:inline-block; 
    vertical-align:top; 
}

Demo

來源

2012-12-12 09:55:48

對齊h2標題旁邊的鏈接

回答

相關問題