有一个Navbar< div>，里面是一个< ul>和每个< li>包含< a>带有链接(这是一个导航栏)
我看了谷歌和这个网站，我couldnt找到我正在寻找什么。
我想要的是能够保持我当前的风格(使用< li>与< a>的内部)，我想要< li>以均匀分布和居中(如果它们均匀分布则该部分是自然的…)在< ul> (位于navbar< div>内)。
无论如何，如果这没有意义让我知道，目前他们只是左对齐…我知道我有：
HTML：
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
CSS：
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
我也可以包括我的.navbar a {}如果是必要的。
我非常新的CSS，所以去容易，也是我看过所有的SO和谷歌第一，couldnt找到任何东西很像这样(虽然也许，因为我是新的，我不认识它的一样)。
如果这是一个错误的CSS方法和/或有一个更容易，更常用的方法这样做。继续和链接/ post，而不是，但我更喜欢这种方式，因为它是最有意义的我。
谢谢
解决方法
如果不想指定90％宽度，则允许无宽度居中动态ul：
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
测试在IE6，FX 3。
编辑：没有无关元素的替代样式：
<!doctype html>
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
