版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41554071/article/details/88990157
ul、li在导航栏编写中的水平居中
1.ul设置宽度的情况
<!DOCTYPE html>
<html>
<head>
<title>ul水平居中</title>
<meta charset="utf-8">
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #ccc;
}
a:hover{
color: #fff;
}
.footer{
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
background-color: #000;
font-size:14px;
}
.footer ul{
width: 564px;/*ul设置了宽度*/
height: 100px;
text-align: center;
margin: 0 auto;
}
.footer ul li{
width: 20%;/*五个列表项，每个宽度设置父元素ul的20%，使其之间间距相同*/
height: 100px;
line-height: 100px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
2.ul不设置宽度的情况
(1) ul设置display:inline-block;
(2) footer外部容器设置文本居中text-align:center;
(3) 每个li列表项设置左右外边距，实现间距相等；
(4) li不设置宽度；
<!DOCTYPE html>
<html>
<head>
<title>ul水平居中</title>
<meta charset="utf-8">
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #ccc;
}
a:hover{
color: #fff;
}
.footer{
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
background-color: #000;
font-size:14px;
text-align: center;
}
.footer ul{
/*width: 564px;ul设置了宽度*/
height: 100px;
display: inline-block;
margin: 0 auto;
}
.footer ul li{
/*width: 20%;五个列表项，每个宽度设置父元素ul的20%，使其之间间距相同*/
height: 100px;
line-height: 100px;
list-style: none;
float: left;
margin-right: 15px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>