实现图中效果,使横向导航条页面居中。
刚开始我采用的方法是给ul设置宽高及CSS属性margin:0 auto;
,ul下的li左浮动,样式简化后的代码如下:
<!DOCTYPE html>
<html>
<head>
<title> 横向导航条页面居中的方法</title>
<style>
a{
text-decoration: none;
color: #000000;
}
ul{
display: block;
width: 436px;
height: 88px;
margin: 0 auto;
padding: 0;
}
li{
list-style: none;
display: block;
float: left;
margin-right: 21px;
}
li:last-child{
margin: 0;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
这样确实能起到使横向导航条页面居中的效果,但是往往横向导航条的宽度难以确定,因此这个方法有一定的局限性。
接下来介绍的这个方法,并不存在上述的局限性,因此推荐使用。
这个方法是将li的CSS属性display:inline-block;
,与ul的CSS属性text-align:center;
,这样ul无需设置宽度与margin:0 auto;也可实现页面居中效果。样式简化后的代码如下:
<!DOCTYPE html>
<html>
<head>
<title> 横向导航条页面居中的方法</title>
<style>
a{
text-decoration: none;
color: #000000;
}
ul{
display: block;
text-align: center;
margin: 0;
padding: 0;
}
li{
list-style: none;
display: inline-block;
margin-right: 21px;
}
li:last-child{
margin: 0;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
注意:text-align作用于文本、内联元素、图片,不会作用于块级元素。
因此ulCSS属性中的text-align:center;不会作用于ul,而是作用ul下的li,使li页面居中。
说明:本篇文章包含的代码并未考虑IE下的兼容性问题。