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 > |
呵呵,由此你可以做成一款菜单了。
天骄国际随心所欲
趴趴走