标签：
在div中ul不知道宽度的情况下，让li和内容居中，在做网站时，列表分页用的就是ul列表，但ul是不能给定义宽度的，应该分页数是随着内容变化的，这样的话，要让分页总是显示在中间部位，就不能再用常用的margin或是text-align这些居中的属性了，下面是这段可以让ul没有宽度的情况下，就可以居中的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ul宽度自适应让li居中</title>
<style type="text/css">
<!--
ul,li{padding:0px;margin:0px; list-style:none;}
.syx{width:765px;height:50px;background:#F2F2F2;margin:0 auto;text-align:center;overflow:hidden;}
.syx ul{float:left;position:relative;left:50%;}
.syx ul li{float:left;position:relative;right:50%;margin:3px;display:block;border:1px #BCBCB0 solid;background:#149D0D;line-height:29px;}
.syx ul li a{display:block;padding:5px;color:#000000;text-decoration:none;}
.syx li a:hover{border:1px solid #333;display:block;width:86px;}
-->
</style>
</head>
<body>
<div class="syx">
<ul>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
<li><a href="http://shenyongxiang.com/">申永祥</a></li>
</ul>
</div>
</body>
</html>
DIVCSS的ul宽度自适应让li居中内容比较适合与分页数字、导航栏目等，可以让内容的增加而不改版页面的样式。
转自：http://shenyongxiang.com/divcss/148.html
如果不浮动li,使li的display为inline-block，ul设置text-align: center，也能达到同样的效果，代码如下：scss
header{
margin-top: 4%;
nav {
ul {
text-align: center;
li {
display: inline-block;
padding: 3.5%;
font-size: 18px;
font-weight: bold;
margin: 0 1px;
}
标签：
原文地址：http://www.cnblogs.com/rocking/p/4734731.html
