html - h2 見出しの横にリンクを配置する

Question

非常に単純な質問ですが、リンクを強制的に h2 見出しでインライン表示するにはどうすればよいですか? 私は次のコードを持っています: http://jsfiddle.net/jezzipin/6DpPX/そして、「トップに戻る」リンクが「ソーシャルメディア」見出しとインラインで表示されるようにしたいのですが、私が試したすべてがそうではないようです仕事。スパンの使用も。

どんな助けでも大歓迎です。

jme1988

注意 明確にするために、これは私が求めている効果です：

Answer 1

このCSSを追加

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

デモ

Answer 2

次のスタイルを適用します。

.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/

Answer 3

リンクを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;
}