你能帮我修复我的 chrome 列表菜单栏吗？答案

【问题标题】：Can you help me fix my list menu bar in chrome?你能帮我修复我的 chrome 列表菜单栏吗？
【发布时间】：2014-10-25 14:45:23
【问题描述】：

我有一个使用 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;
}

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

【问题讨论】：

使用li { display: inline-block;
感谢编辑。

标签： html css google-chrome menu navigation

【解决方案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>

【讨论】：

嘿，感谢您的帮助，但这会让菜单栏出现在 chrome 上吗？宽度很好，因为如果我正在制作的网站的性质。
宽度怎么样？ li 的宽度为 230px x 4 = 920，而您的 cont 为 890 px。简单的数学运算。
好的，对不起，我现在明白你的意思了。但是，它仍然没有出现在 chrome 上。还有其他建议吗？
嘿伙计，谢谢你的帮助，这与我放在菜单上方的图片有关。在我摆脱它之后，这个列表就起作用了。再次感谢。

【解决方案2】：

首先，您需要清除浮动元素。您可以在ul 上设置overflow: hidden 或使用clearfix。这里真正的问题是，在您的固定宽度li 是210px 之上，您已将10px 添加到所有它们中，这使得总宽度920px 大于890px 的宽度父母#Navigation。使用box-sizing: border-box 强制向内填充并且不影响元素的宽度：

ul{
  overflow: hidden;
}

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

FIDDLE

【讨论】：