导航栏固定宽度显得很不灵活,但是也不能绝对定位,所以很苦恼
display: inline-block;
+ text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#center-nav-demo {text-align: center;}
#center-nav-demo .nav {display: inline-block; margin: 0; padding: 0; border: 1px solid red;}
#center-nav-demo .nav li {display: inline-block; border: 1px solid blue;}
</style>
</head>
<body>
<div id="center-nav-demo">
<ul class="nav">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>