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
>
呵呵,由此你可以做成一款菜單了。