横向导航条页面居中的方法

实现图中效果，使横向导航条页面居中。

这里写图片描述
刚开始我采用的方法是给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下的兼容性问题。

横向导航条页面居中的方法

实现图中效果，使横向导航条页面居中。

猜你喜欢