ul li居中问题+li中间有小竖线问题的解决方案

weiking 2010.09.20

实现效果下图所示：

实现效果(html部分)：

<div id="footer" class="clearfix">
<ul class="clearfix">
	<li><a style="border: none;" href="#" target="_blank">팬되기</a></li>
	<li><a href="#">초대하기</a></li>
	<li><a href="#" target="_top">FAQ</a></li>
	<li><a href="#" target="_blank">커뮤니티</a></li>
	<li><a href="#" target="_blank">개인보호 정책</a></li>
</ul>
고객님의 페이스북 ID는 uId=1111111 입니다.</div>

实现效果(css部分)：

#footer {
    border-top: 1px solid #999;
    text-align: center;
    padding: 15px 0;
    position: relative;
}
 
#footer ul {
    margin: 5px auto;
    overflow: hidden;
    width: 520px;
}
 
#footer ul li {
    display: inline;
    margin-left: -1px;
}
 
#footer ul li a {
    border-left: 1px solid #999;
    display: inline;
    padding: 0 10px;
    text-decoration: none;
}

补充，网站导航菜单的分割线（例如小竖线）的完美解决方法

1.html部分去掉单独为第一个li写的style中css
2.下面是（css部分）：

#footer {
    border-top: 1px solid #999;
    text-align: center;
    padding: 15px 0;
    position: relative;
}
 
#footer ul li {
    float: left;
    margin-left: -1px; /*这个必须滴*/
}
 
#footer ul li a {
    border-left: 1px solid #999;
    padding: 0 10px;
    text-decoration: none;
}

未知宽度的水平居中

最简单的方法，就是让每一个li元素以inline的方式让它们一字排开，给父层设置text-align:center就可以搞定这一切,例如代码：

#footer {
    text-align: center;/*这个必须滴*/
}
 
#footer ul li {
    display: inline;/*这个必须滴*/
}
 
#footer ul li a {
    padding: 0 10px;
    text-decoration: none;
}