如何让"margin:auto“和”margin left:offset“一起工作？

Question

我的test site上有一个容器

#container {
  margin: 0 auto;
}

然后我添加了左侧垂直菜单，在一些小屏幕上，该菜单并不完全可见。

就像我的旧笔记本电脑:-)

我想保持margin:auto设置不变，但我想将整个#container稍微向右移动一点。

有没有办法做到呢？

我试过#container {margin-left:10px;}，但没有用。

Answer 1

在玩firebug时，它很好用：

#container {
 margin: 0 auto;
 position:relative;
 left:10px;
}

希望它能解决..。

Answer 2

最简单的方法是引入另一个元素(或者设置另一个元素的样式，如果它已经可用)。因此，您可能会有：

<div style="margin-left: 10px;">
   <div id="container" style="margin: auto;">...</div>
</div>

这样，居中是在一个容器div中完成的，该容器div已经获得了适当的左侧填充。

Answer 3

如果您将#container div包装在另一个具有双倍左边距的div中，这将会起作用。

  #wrap {
    margin-left: 20px;
  }
  .centre { /* this would be your #container */
    width: 100px;
    height: 40px;
    margin: auto;
    background-color: #f00;
  }
  #wrap .centre {
    background-color: #00f;
  }

HTML：

  <div class="centre"></div>
  <div id="wrap">
    <div class="centre"></div>
  </div>

http://jsbin.com/emogu3