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设置为与页面中心对齐：

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，您需要清除浮动元素。您可以在overflow: hidden上设置ul或使用clearfix。这里真正的问题是，在你的固定宽度li为210px之后，你已经为所有这些填充添加了10px，这使得总宽度为920px，大于父890px的{{1}}宽度。使用#Navigation强制填充向内，不影响元素的宽度：

box-sizing: border-box

FIDDLE

你能帮我修一下chrome中的列表菜单栏吗？

2 个答案: