首页 > 代码库 > 居中导航

居中导航

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>布局-居中导航</title>    <style type="text/css">    ul{        text-align: center; /* text-align 只对行级元素起效果*/        height: 30px;        line-height: 30px;        background-color: #f00;    }    li,a{        display: inline-block;        width: 80px;        height: 100%;    }    li{        margin: 0 5px;         list-style: none;    }    a,a:hover,li.cur a{        color: #fff;        text-decoration: none;    }    a:hover,li.cur a{        background-color: #c00;    }    </style></head><body><ul>    <li><a href="#">推荐</a></li>    <li><a href="#">歌单</a></li>    <li><a href="#">打牌DJ</a></li>    <li><a href="#">歌手</a></li>    <li><a href="#">新碟上架</a></li></ul></body></html>

技术分享

居中导航