问题描述:

Really simple question, how do I force a link to appear inline with a h2 heading?

I have the following code : http://jsfiddle.net/jezzipin/6DpPX/ and I'd just like the 'Back to top' link to appear inline with the 'Social Media' heading but everything I try doesn't seem to work. Even the use of spans.

Any help would be greatly appreciated.

jme1988

N.B. Just to be clear, this is the effect I am after:

网友答案:

Apply the following styles:

.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;   
}

Then in the html wrap the image and text in a div with 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>

Example: http://jsfiddle.net/6DpPX/8/

网友答案:

Add this css

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

Demo

网友答案:

You could put the link inside your h2.

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

Alternative view: 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;
}
相关阅读:
Top