<a>标签属性display的不同设置达到目的
display:block和display:inline;
display:block 可以使得<a>标签设置宽高、边线、margin和padding，因为这样设置后<a>标签拥有的块元素的性质。
还可以通过设置<a>标签display:inline代替一般采用的<ul><li>组成的列表，省却了诸如list-style:none,float:left等设置来获得水平或垂直排列。
注意：下面的css代码默认 display:block;然后我们需要水平排列是添加display：inline
可以看到html代码当中很多<a>标签中有绿色背影的部分就是我们水平排列的4个<a>标签用一个<div>包含起来。
效果图如下：
css代码：
1 a{ 2 display:block; 3 } 4 .footer { 5 6 bottom:0px; 7 padding: 10px 5% 65px; 8 9 text-align: center; 10 color:#337ab7; 11 } 12 //a 13 .footer .footer-logo { 14 font-size: 0; 15 height: 54px; 16 line-height: 32px; 17 margin: 0; 18 border-bottom:1px solid #337ab7; 19 } 20 21 .footer .footer-link { 22 font-size: 15px; 23 width: auto; 24 margin:30px 0; 25 } 26 .footer .footer-link a { 27 display: inline; 28 line-height: 1; 29 margin: 0 8px; 30 } 31 .footer a:link,.footer a:hover{ 32 33 text-decoration:none; 34 } 35 //a 36 .footer .footer-tel { 37 38 font-size: 24px; 39 height: auto; 40 line-height: 27px; 41 } 42 .footer .footer-time { 43 margin: 0; 44 } 45 //a 46 .footer .online-service-btn { 47 border-radius: 10px; 48 font-size: 12px; 49 height: 18px; 50 width: 118px; 51 line-height: 18px; 52 margin:10px auto; 53 } 54 .footer .footer-info { 55 font-size: 12px; 56 margin-top:40px; 57 }
1 <div class="footer"> 2 <div class="col-xm-12"> 3 <div class="column"> 4 <a class="footer-logo"> 5 <h2><bold>好教授在线</bold></h2> 6 </a> 7 <div class="footer-link"> 8 <a href="#">首页</a> 9 <a href="#">下载客户端</a> 10 <a href="#">关于我们</a> 11 <a href="#">帮助</a> 12 </div> 13 <a class="footer-tel" href="tel:4001231122">400-888-3861</a> 14 <p class="footer-time">工作日 9:00-18:00</p> 15 <div class="online-service"> 16 <a class="btn-primary online-service-btn" href="tencent://message/?uin=2365180536&Site=&menu=yes" target="_blank" role="button">在线客服</a> 17 </div> 18 <p class="footer-info"> 19 © 2015 「好教授在线」 — 沪ICP备15052540号 20 </p> 21 </div> 22 </div> 23 </div>