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

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

这里写图片描述
刚开始我采用的方法是给ul设置宽高及CSS属性margin:0 auto;,ul下的li左浮动,样式简化后的代码如下:


<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;也可实现页面居中效果。样式简化后的代码如下:


<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下的兼容性问题。

你可能感兴趣的:(横向导航条页面居中的方法)