第一步：父层设置文本居中属性

ul{

    text-align:center;

}

第二步：li设置内联样式

li{

    display:inline;

}

PS

只需以上两步就可以实现导航栏居中显示了，但为了美观好看，可以稍微加点料。以下供参考

<style type="text/css">

    body{

        background:#232e3c;

        padding:16px;

    }

    #nav ul{

        text-align:center;

        list-style:none;

    }

    #nav li{

        display:inline;

        margin-left:16px;

        background:#fff;

        border-radius:25px;

        padding:10px;

    }

    #nav a{

        color:#000;

        text-decoration:none;

        font-size:18px;

        font-weight:bold;

        font-family:consolas;

    }

    #nav li:hover{

        background:#7bc3d6;

    }

</style>

list-style:none; 取消列表前面的列表样式
border-radius:25px; 设置圆角背景样式
text-decoration:none; 取消链接下划线
li:hover 设置一下鼠标移上去时的背景变色

巴特西

简单两步使用css控制div下导航栏ul居中显示

第一步：父层设置文本居中属性

第二步：li设置内联样式

PS

最新文章

热门文章