首页 / 素材代码 / 使用 css 控制 ul 水平居中

使用 css 控制 ul 水平居中

在制作主题时,需要在底部添加一个导航,用来显示“关于我们”等页面链接,一般需要设置 UL 水平居中,下面是比较简洁的方法,可以实现不限定宽度让ul水平居中,关键在于 display:inline 的运用,记录一下。

html结构

1
2
3
4
5
6
7
8
9
<divid="links"><ul><li><ahref="#">关于倡萌</a></li><li><ahref="#">广告合作</a></li><li><ahref="#">版权声明</a></li><li><ahref="#">联系倡萌</a></li><li><ahref="#">友情链接</a></li></ul></div>

CSS样例

1
2
3
4
5
#links{height:40px;}
 
#links ul{text-align:center;list-style-type:none;}
 
#links ul li{display:inline-block;}

如果你有更简单的实现方法,欢迎告知倡萌。

Return top