我有空没有事做研究一下CSS+DIV,现做一条导航条，遇到一个问题，它大家帮忙解决一下：
以下代码可以实现居中，但有一个问题就是，如果我加多一个栏目比如加多一个HTML code:
<li><a href="">联系我们</a></li>
，它将会布局乱。这样得要修改width:57%;这个值，怎样修改才能让自适应，即使添加多几个导航也不会乱？
CSS code:
.test
{
margin:0 auto;
width:100%;
height:30px;
}
.test ul
{
list-style:none;
margin:0 auto;
width:57%;
}
.test ul li
{
float:left;
margin-right:20px;
}
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div class="test">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品介绍</a></li>
<li><a hre
