DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS讓ul所有的li居中顯示的方法
CSS讓ul所有的li居中顯示的方法
編輯:CSS詳解     

CSS ul li居中本來以為很容易就實現了,因為平時都是讓li float:left,這樣後面的可以排成一行,對居中沒做要求,不過最近搞個項目,必須讓ui的每個li都居中顯示,這可讓我難為了,沒想到一時把我難壞了,不過還是被我解決了。下面說下方法:

我的方法主要是利用li的浮動固定寬度來實現,li的默認display為block,將這個屬性改為inline就可以讓ul li居中,簡單吧!下面來段代碼實例:

01 <style type="text/CSS"> 02 #bNav{ 03 margin-top:10px; 04 background:#D9EBF5; 05 text-align:center; 06 } 07 #bNav ul{ 08 padding:4px 0; 09 margin:0; 10 overflow:hidden; 11 } 12 #bNav ul li{ 13 display:inline; 14 padding:0; 15 } 16 </style> 17 <div id="bNav" class="bNav"> 18  <ul> 19   <li><a href="#" title="Home">公司主頁</a></li> 20   <li>|</li> 21   <li><a href="#" title="About Us">About Us</a></li> 22   <li>|</li> 23   <li><a href="#" title="形象設計">形象設計</a></li> 24   <li>|</li> 25   <li><a href="#" title="藝術天地">藝術天地</a></li> 26   <li>|</li> 27   <li><a href="#" title="Contact Us">Contact Us</a></li> 28   <li>|</li> 29   <li><a href="#" title="應用開發">應用開發</a></li> 30   <li>|</li> 31   <li><a href="#" title="工作服務">工作服務</a></li> 32   <li>|</li> 33   <li><a href="#" title="申請鏈接">申請鏈接</a></li> 34  </ul> 35 </div>

呵呵,由此你可以做成一款菜單了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved