h2 제목 옆에 링크 맞추기

정말 간단한 질문입니다. 어떻게하면 h2 제목과 함께 링크가 인라인으로 나타나게 할 수 있습니까? 다음 코드를 가지고 있습니다 : http://jsfiddle.net/jezzipin/6DpPX/ 그리고 'Back to top'링크가 'Social Media'제목과 함께 인라인으로 나타나기를 원합니다. 그러나 시도한 모든 것은 제대로 작동하지 않습니다. 스팬의 사용조차도.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에서 ID main-content와 div에서 이미지와 텍스트 줄 바꿈 그냥 명확하게하기 위해, 이것이 내가 후에 오전 효과입니다.

 <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

는 페이지 이미지를 아래로 밀어으로이 잘못 5,. – jezzipin

위의 CSS를 수정하여 올바르게 수정했습니다. – jezzipin

@ jme1988 잘 잡으려고, 피들이 스크롤하기 때문에 나는 그것을 보지 못했습니다. 솔루션과 바이올린을 업데이트했습니다. BTW,'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 제목 옆에 링크 맞추기

답변

관련 문제