<!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>
原文：http://www.cnblogs.com/qq-757617012/p/6019929.html