对齐h2标题旁边的链接

时间:2012-12-12 09:46:28

标签: html css alignment

非常简单的问题,如何强制链接以h2标题显示内联? 我有以下代码:http://jsfiddle.net/jezzipin/6DpPX/我只想将“返回顶部”链接显示为“社交媒体”标题,但我尝试的所有内容似乎都不起作用。甚至使用跨度。

非常感谢任何帮助。

jme1988

N.B。为了清楚起见,这就是我所追求的效果:

enter image description here

3 个答案:

答案 0 :(得分:2)

添加此CSS

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

<强> Demo

答案 1 :(得分:0)

应用以下样式:

.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中,标识为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/

答案 2 :(得分:0)

您可以将链接放在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;
}
相关问题