html - 你能帮我修复 chrome 中的列表菜单栏吗？

Question

我有一个菜单栏，我使用 li 标签和 css 创建了它以使其水平。但是，当我在 Chrome 中打开它时，它不起作用，根本不存在。

但是，当我使用 IE 时它很好。

我的代码如下:

任何帮助将不胜感激:

#Navigation {
  margin-left:350px;
  padding-left:0px;
  height:10px;
  width:890px;
  font-family:Helvetica;
  font-size:16px;
}

li {
  list-style-type:none; 
  margin:0;
  padding:10px;
  float:left;
  display:block;
  width:210px;
}

• 首页
• 关于我们
• 我们的商店
• 联系我们

Answer 1

您可以将 li 元素的百分比宽度设置为 20%，并将 margin: 0 auto 设置为与页面中心对齐:

#Navigation {
    /*margin-left:350px;*/
    padding-left:0px;
    height:10px;
    width:890px;
    font-family:Helvetica;
    font-size:16px;
    margin: 0 auto;
    text-align: center;
}
li {
    list-style-type:none;
    margin:0;
    padding:10px;
    float:left;
    display:block;
    width: 20%;
}

<div id="Navigation">
    <ul>
        <li><a href="">Home</a>
        </li>
        <li><a href="">About Us</a>
        </li>
        <li><a href="">Our Stores</a>
        </li>
        <li><a href="">Contact Us</a>
        </li>
    </ul>
</div>