Html 容器div上的填充在Google Chrome中不起作用

我有一个固定的以宽度为中心的模板，我想在“main”div的左侧和右侧应用10px的填充。这样，在小屏幕上，站点就不会触及屏幕的左侧。它适用于IE、Firefox、Safari、Opera，但不适用于Google Chrome

以下是相关代码：

<style type="text/css">
  #main {
    padding:0 10px;
  }
  #wrap {
    width:980px;
    margin:0 auto;
  }
</style>
<div id="main">
  <div id="wrap">
  </div>
</div>

#主要{
填充：0 10px；
}
#包裹{
宽度：980px；
保证金：0自动；
}

我尝试了各种css组合，但没有成功。您可以查看实际页面。（将来可能会改变！）

---

谢谢

在这种情况下，它在任何浏览器中都不起作用，因为页面实际上是横向滚动的，尽管出现了10px的间隙。至少这是我在Safari和Chrome中的行为

相反，您要使用的是最大宽度。这可以防止宽度超过980px，但允许它求助于宽度：自动上升，直到该点

#wrap {
    max-width: 980px;
    margin:0 auto;
}

max width与包括IE7在内的所有主要浏览器兼容+

您还应签出CSS媒体查询以处理较小的屏幕尺寸：

---

最好将

最小宽度

定义为

#main

而不是像这样填充

：

#main {
    min-width:1000px;
  }

谢谢你是对的，但在我的例子中，谷歌chrome甚至没有在两侧添加10px的间隙。这是一个更好的选择。我很快就会试试这个。我的密码有错误吗？或者你认为这是浏览器中的一个bug吗？尝试了这个问题，但是在Chrome中也遇到了同样的问题。适用于其他浏览器。