<a>標籤屬性display的不一樣設置達到目的css
display:block和display:inline;html
display:block 能夠使得<a>標籤設置寬高、邊線、margin和padding,由於這樣設置後<a>標籤擁有的塊元素的性質。ui
還能夠經過設置<a>標籤display:inline代替通常採用的<ul><li>組成的列表,省卻了諸如list-style:none,float:left等設置來得到水平或垂直排列。spa
注意:下面的css代碼默認 display:block;而後咱們須要水平排列是添加display:inlinecode
能夠看到html代碼當中不少<a>標籤中有綠色背影的部分就是咱們水平排列的4個<a>標籤用一個<div>包含起來。htm
效果圖以下:blog
css代碼:get
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>