主要运用的dispaly将a变成行内块,再用padding撑开宽度。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.nav { ???????????height: 40px; ???????????background: #eee; ???????????border-top: 3px solid orange; ???????????border-bottom: 1px solid #aaa; ???????} ???????.nav-con { ???????????width: 1000px; ???????????height: 40px; ???????????margin: 0 auto; ???????} ???????a { ???????????font: 12px/40px 微软雅黑; /*40px=>line-height:40px;*/ ???????????color: #333; ???????????display: inline-block; ???????????height: 40px; ???????????text-decoration: none; ???????????padding: 0 12px; ???????} ???????????a:hover { ???????????????background: #999; ???????????} ???</style></head><body> ???<div class="nav"> ???????<div class="nav-con"> ???????????<a href="#">设为首页</a> ???????????<a href="#">手机新浪网</a> ???????????<a href="#">移动客户端</a> ???????</div> ???</div></body></html>
CSS——新浪导航demo
原文地址:http://www.cnblogs.com/wuqiuxue/p/7784488.html